Explaination: In dropdown the selected values Displayed Using Ajax.In this tutoria i has explained the method how we will use ajax in dropdown fields.The field values how we can pass to the Ajax Coding and that values we have to retriew from the ajax and how we can have the fetch the datas from database.I hope this tutorial we be very usefull for the beginners and Developers to develop the coding and get an idea for using the ajax in ur Project. 1.First we have to create the form to sent the request to the database.Then we have to use the onchange function to get the selected values through an ajax. 2.Then we have to Fetch the datas from database what fields we have selected in dropdown that datas will be displayed in table.For that we have write the coding for to create the table and fetch the datas from database. 3.load_data--->Is came from ajax txtHint2---->Is came from ajax Because we mentioned this same ajax coding for more than two dropdown means while loading the datas it is not come correctly so that only we can use the two different id in ajax. 4.Then we have POST the values through ajax page(ie..serach.php) <option value="shipping_"></option> the option value we have to explode and select the option value we have mentioned in the if ,else condition. 5.LIKE function is to be used for to pass the values in ajax.
Create Form for THREE Dropdown by using ONchange events using AJAX:
First we have to create the form to sent the request to the database.Then we have to use
the onchange function to get the selected values through an ajax.
Froms: Dropdown1: <form> <select name="search" onchange="showSearchs(this.value)" style="border: 1px solid #97BCFA;"/> <option value="slam">Search By Booking Number</option> <?php $selects=mysql_query("select * from registered_users WHERE seat_numbers !='' "); while($cats=mysql_fetch_array($selects)) { ?> <option value="<?php echo $cats['booking_number'];?>"><?php echo $cats['booking_number'];?></option> <?php }?> </select> Dropdown2: <select name="search1" onchange="showSearchs(this.value)" style="border: 1px solid #97BCFA;"/> <option value="slam">Search By Ticket Delivery</option> <?php $selects=mysql_query("select * from tbl_name "); while($row=mysql_fetch_array($selects)) { ?> <option value="delivery_<?php echo $row['did'];?>"><?php echo $row['dname'];?></option> <?php }?> </select> Dropdown3: <select name="search1" onchange="showSearchs(this.value)" style="border: 1px solid #97BCFA;"/> <option value="slam">Search By Shipping Status</option> <option value="shipping_1">Delivery in progress</option> <option value="shipping_2">Delivered</option> </select> </form>
Ajax Script:
<script>
function showSearchs(str)
{
if(str!="")
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint2").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// if(xmlhttp.responseText!="")
//{
document.getElementById("load_data").innerHTML=xmlhttp.responseText;
//}
}
}
xmlhttp.open("GET","search.php?id="+str,true);
xmlhttp.send();
}
}
</script>
Then we have to Fetch the datas from database what fields we have selected in dropdown that datas will be displayed in table.For that we have write the coding forto create the table and fetch the datas from database.
Replace the table using ajax by passing id
<table width="180%" cellpadding="7" cellspacing="0" border="0" style="margin: 8px 0px 3px;"> <thead> <tr class="table_tr1"> <th>S.No</th> <th>Shipping Status</th> <th >payment_status</th> </tr> </thead> <tbody id="load_data"> <?php $select=mysql_query("select * from tbl"); while($row=mysql_fetch_array($sql)) { $id1=$row['id']; $status=$row['status']; ?> load_data--->Is came from ajax txtHint2---->Is came from ajax Because we mentioned this same ajax coding for more than two dropdown means while loading the datas it is not come correctly so that only we can use thetwo different id in ajax.
<tr style="text-align:center;" class="table_tr2" id="txtHint2"> <td><?php echo $id++;?></td> <td><?php if($row['payment_status'] == "Completed")
{ echo "Confirmed"; } else { echo "Not Confirmed"; } ?></td>
<td >
<select name="shipping" onchange="showUpdate(this.value,'<?php echo $row['booking_number']; ?>')" style="width: 100px;" id="txtHint3" >
<option <?php if ($row['shipping_status'] == "----" ) echo 'selected'; ?> value="----">----</option>
<option <?php if ($row['shipping_status'] == "Delivery In Progress" ) echo 'selected'; ?> value="Delivery In Progress">Delivery In Progress</option>
<option <?php if ($row['shipping_status'] == "Delivered" ) echo 'selected'; ?> value="Delivered">Delivered</option>
</select>
</td>
</tr>
Search.php:
Then we have POST the values through ajax page(ie..serach.php)
<option value="shipping_2"></option>
the option value we have to explode and select the option value we have mentioned in the
if ,else condition
<?php include("db.php"); if($_GET['id']) { $id3=$_GET['id']; $my_data=mysql_real_escape_string($id3); $i=1; $sd = explode("delivery_", $my_data); $shd = explode("shipping_", $my_data); if($sd[1]) { $select_data=mysql_query("select * from registered_users where delivery_option = '$sd[1]' AND seat_numbers != '' ORDER BY id DESC LIMIT 10"); } else if($shd[1]) { if($shd[1] == "1") { $sh_option = "Delivery In Progress"; } else { $sh_option = "Delivered"; } $select_data=mysql_query("select * from registered_users where shipping_status = '$sh_option' AND seat_numbers != '' ORDER BY id DESC LIMIT 10"); }else { $select_data=mysql_query("select * from registered_users where booking_number LIKE '%$my_data%' OR payment_id LIKE '%$my_data%' OR name LIKE '%$my_data%' OR email LIKE '%$my_data%' OR payment_status LIKE '%$my_data%' AND seat_numbers != '' ORDER BY id DESC LIMIT 10"); } $noofreccord = mysql_num_rows($select_data); if($noofreccord>0) { while($row=mysql_fetch_array($select_data)) { //$count_data = count($row); $id=$row['id']; echo "<td>" . $row[payment_status]. "</td>"; echo "<td>" . $row[payment_id]. "</td>"; if($row[payment_status] == "Completed") { echo "<td>Confirmed</td>"; } else { echo "<td>Not Confirmed</td>"; } ?> <td> <select name="shipping" onchange="showUpdate(this.value,'<?php echo $row['booking_number']; ?>')" style="width: 100px;" id="txtHint3" > <option <?php if ($row['shipping_status'] == "----" ) echo 'selected'; ?> value="----">----</option> <option <?php if ($row['shipping_status'] == "Delivery In Progress" ) echo 'selected'; ?> value="Delivery In Progress">Delivery In Progress</option> <option <?php if ($row['shipping_status'] == "Delivered" ) echo 'selected'; ?> value="Delivered">Delivered</option> </select> </td> <?php echo "</tr>"; } } else { echo "<tr>"; echo "<td colspan='12' align='center' style='font-weight: bold; padding: 80px 0px 89px; font-size: 20px;color:#3399FF;text-align:center;'>NO DATA FOUND</td>"; echo "</tr>"; } } ?>I hope this tutorial is very helpfull for the code developing.In this i mentionedthree dropdown select box for that how to use the ajax and pass the values from ajax page(search.php)and there how we have to request the value and how we can usethis ad fetch from database dispalyed while we selecting the option values the selected details only will displayed.
No comments:
Post a Comment