How to update MYSQL field without refreshing page in PHP? - php

Question

I wish to update MYSQL data using text instead of using submit button.
Admin will choose option from combobox and then click at save to update the MYSQL records.
How to do this using AJAX or jquery?
My coding:
<?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'];
//$phone=$row['phone'];
$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><td><a href=#>save</a></td>
</tr>
<?php
} //while
?>
</table>
</form>
image

Answer 1

This is actually really simple using jQuery. First, you have to create another PHP script that will actually run the UPDATE code. I'm not sure how much you know about AJAX requests, but you can essentially think of them as your browser opening a new tab in the background, sending the request and returning/parsing the response with JavaScript.
So, I'd write a PHP script that you can request (maybe "update_field.php" or "update_field_ajax.php") which does the actual updating. Write this script as you would if a form were being submitted from another page (ie it'll have POST and GET variables, validations, etc). There will be two main differences. First, you'll pass in the POST params with jQuery and second you won't return HTML (you can return HTML if you want - but if you're doing a simple update you really only need some sort of success or fail/error message response). I'd consider JSON for the response type. So, the PHP script is up to you to write, you'll write it just as you normally.
Next, you'll use jQuery to grab the data (GET/POST params) from the page and make a request to the PHP script you created. This isn't all that bad either. I'm not sure what you mean by "using text instead of a submit button" other than you don't want to use a submit button so I'll explain this in a somewhat abstract way. In order to get the AJAX call to run you must have something trigger it. This will be an event on the page, and that event will call a function that fires the AJAX request. Google around for information on jQuery events, but essentially when an event is fired it calls a function that you define. When that function is called we can use jQuery's post() method to create an AJAX post request. This method call will look something like:
jQuery.post('url of your script', {postVarOne: jQuery('some elt').val()}, function () {success function}, 'json');
The details of jQuery.post can be found at http://api.jquery.com/jQuery.post/
So basically write a PHP script as you normally would that returns something other than HTML signifying success/fail or a response message(unless you need to inject HTML right into the page) and then use jQuery.post (or jQuery more generic jQuery.ajax method) to have your browser request that script with the GET/POST vars you define and parse the response.
Finally, check out these tutorials for more information/code examples.
http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/
http://www.php4every1.com/tutorials/jquery-ajax-tutorial/