Order ofQuery with AJAX PHP and MySQL - php

Question

Got a bit of a confusing situation, I have a form on my webpage that allows a user to enter information into a database...
Form
<form id="insertbill">
Total <input type="text" id="total" name="total" /><br />
Bill name<input type="text" id="bill-name" name="bill-name" /><br />
bill descriptiion <input type="text" id="bill-description" name="bill-description" /><br />
bill colour<input type="text" id="bill-colour" name="bill-colour" />
<input type="button" value="submit" onClick="insertBill();" />
</form>
This form then send the information via AJAX to my php which then inputs it into my DB
AJAX
function insertBill()
{
$.post('insert_bill.php', $('#insertbill').serialize(),
function(data) {
$('#bills').append(data);
});
};
PHP
$uid = $_SESSION['oauth_id'];
$bill = mysql_real_escape_string($_POST['total']);
$billname = mysql_real_escape_string($_POST['bill-name']);
$billdescription = mysql_real_escape_string($_POST['bill-description']);
$billcolour = mysql_real_escape_string($_POST['bill-colour']);
#Insert Record
$query = mysql_query("INSERT INTO `outgoings` (user_id, bill, bill_name, bill_description, bill_colour ) VALUES ('$uid', '$bill', '$billname', '$billdescription', '$billcolour')") or die(mysql_error());
Once this is done, the data is then returned to the webpage, with another form that allows the user to update the record...
Returned data/form
Print "<tr>";
Print "<th>total:</th> <td>".$bill . "</td> ";
Print "<th>bill name:</th> <td>".$$billname . "</td> ";
Print "<th>bill deposit:</th> <td>".$billdescription . "</td> ";
Print "<th>colour:</th> <td>". $billcolour . " </td></tr>";
echo "<th>edit:</th> <td>
<form id='bill-upd'>
<input type='hidden' value='". $billname."' name='billid' id='billid''>
Total <input type='text' id='total' name='total' /><br />
Bill name<input type='text' id='bill-name' name='bill-name' /><br />
bill descriptiion <input type='text' id='bill-description' name='bill-description' /><br />
bill colour<input type='text' id='bill-colour' name='bill-colour' />
<input type='button' value='submit' onClick='updateBill();' />
</form>
</td>";
My problem is that the returned form doesn't update, this is because I need to somehow find the id of the record that was inserted, place it into my form to be returned I think... I hope this isn't too confusing, but has anybody a better way of doing this without reloading the page?

Answer 1

here's what what you could include on your, insert_bill.php, view page:
<script>
var json=<?
$arr=array($bill, $billname, $billdescription, $billcolour);
echo json_encode($arr); ?>;
$('tr td:nth-child(0)').html(json[0]);
$('tr td:nth-child(1)').html(json[1]);
$('tr td:nth-child(2)').html(json[2]);
$('tr td:nth-child(3)').html(json[3]);
</script>
I guess the one outstanding issue is the "id" you says gets returned from your database. Can you explain a little further? Are their multiple forms on your insert_bill.php page? Regardless, you could put that $id into the array and feed it into and html() function like I did with the other variables.

Answer 2

You need to return the data from the database and then change, i imagine if you just need the id you must do.
in PHP
echo mysql_last_insert_id(); // so you get the last inserted id and "return" to the JS
In JS, inside the function data
You get the echo as a return and change the id
and then $("#billid").val(data)
I hope it help you