Update table record using PHP AJAX when multiple instances - php

Question

On my page I have multiple forms all the same as this...
<form class='bill-upd'>
<input type='hidden' value='".$info['rand']."' name='rand2' id='rand2'>
<input type='hidden' value='".$info['id']."' 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>
I then have my AJAX as so
function updateBill()
{
$.post('update_bill.php', $('.bill-upd').serialize(),
function(data) {
$(this).append(data);
});
};
If I have one form on my page, this works fine, but when there are multiple instances, my same record is being overwritten, can anybody tell me where im going wrong?
Thanks
With the help of #Armatus and #Bricriu I got it sorted, the answer as marked worked, stupidly forgot to wrap it within document.ready

Answer 1

You need a way to specify which bill you're updating, otherwise it just takes all of them. This should work, since we can determine which one it is by which button was clicked.
Edit: I personally would bind the even using jQuery rather than onClick on the element itself:
$(".bill-upd input:submit").click(function(){
var elem = $(this);
$.post('update_bill.php', elem.parent('.bill-upd').serialize(),
function(data) {
elem.append(data);
});
});

Answer 2

If the other forms have the same class .bill-upd the javascript .serlialize() will take values from them also. Make sure the other forms have an alternate class.
What would be better would be if you gave the form a unique id such as id="billform" and then replace $('.bill-upd').serialize() with $('#billform').serialize().
Hope this helps.
EDIT:
Use this:
$(this).parent('.bill-upd').serialize()
to serialize the parent of that which was clicked.