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);
    });
});