Question

I have no experience with jquery and ajax, so far I just looking for source and edit paste the code into my coding. Now I try to look for tutorial autosave combobox selection but i fail to find it.Can someone help me? I only done with MYSQL display record, but I do not know how to auto update combobox selection nito MYSQL using jquery. Example, I want to select booking status, when i choose approve from combobox, it will automatically save into MYSQL without click button submit.

<?php

include('config.php');

$per_page = 9; 

if($_GET)
{
$page=$_GET['page'];
}



//get table contents
$start = ($page-1)*$per_page;
$sql = "SELECT bookingID,eventinfo.eventTitle,boothAlias,testbook.bstatus,date, testbook.username, customer.companyName, customer.contactName from eventinfo, testbook, customer where testbook.username=customer.username AND testbook.eventID=eventinfo.eventID order by date desc limit $start,$per_page";
$rsd = mysql_query($sql);
?>

<form method="post" name="form">
<table width="800px">

    <?php
    //Print the contents

    while($row = mysql_fetch_array($rsd))
    {

        $id=$row['companyName'];
        $contactName=$row['contactName'];
        $eventTitle=$row['eventTitle'];
        $date=$row['date'];
        $status=$row['bstatus'];
        $booth=$row['boothAlias']

    ?>
    <tr><td style="color:#B2b2b2; padding-left:4px"><?php echo $id; ?></td><td><?php echo $contactName; ?></td>
    <td><?php echo $eventTitle; ?></td><td><?php echo $booth; ?></td><td><?php echo $date; ?></td><td><select name='status' id='status'>
        <option value='-1'>--Select--</option>
    <option value='0'>Approve</option>
    <option value='1'>Reject</option>
    <option value='2'>Pending</option>
    </select></td>
    </tr>
    <?php
    } 
    ?>
</table>
</form>

image

Answer 1

do this

<select name='status' id='status'>
        <option value=''>--Select--</option>
        <option value='0'>Approve</option>
        <option value='1'>Reject</option>
        <option value='2'>Pending</option>
</select>
<div id="autosavenotify"></div>

<script>
$(document).ready(function(){
$('select').live('change',function () {
        var statusVal = $(this).val();
        alert(statusVal);
        $.ajax({
                 type: "POST",
                 url: "saveStatus.php",
                 data: {statusType : statusVal },
                 success: function(msg) {
                     $('#autosavenotify').text(msg);
                 }
      })
  });
});
</script>

on saveStatus.php do your mysql update

<?php

 $st=$_POST['statusType'];
 $qry =" UPDATE tableName SET `tablefield`=$st .. ";
 $done = mysql_query($qry);
 if($done)
 {
   echo "Saved Successfully";
 }
?>