Jquery AJAX post from multiple forms on the same page

JavaScript
1

Hello,

I’m struggling with a script for an e-commerce site.

When the user clicks the add to cart button they are currently taken to a PHP shopping cart page, but the client wants them to stay on the same page after they press the button and get notified that an item has been added to the cart.

The add to cart button is a form submit button, because there is also a quantity field for each item. I would have cracked this by now but there are multiple add to cart buttons on each page and when I submit the form only the data from the first form in the page is sent to the cart page.

Here’s a dummy version the JavaScript:



$(document).ready(function(){     
            
    $('.subbtn').click(function(){
                
        $('<p id="add">Added To Cart</p>').insertAfter(this).fadeOut(3000);                
                
        $('#result').load('cart.php', {'quantity': $('[name=quantity]').val(), 'id': $('[name=id]').val()});
                
        return false;
    });
            
});

And Here’s a dummy version of the HTML



<form method="post" action="cart.php" class="first">
        <label for="quantity">qty</label>
        <input type="text" name="quantity" id="quantity" value="1" />
        <input type="submit" name="submit" class="subbtn" value="go" />
        <input type="hidden" name="submitted" value="TRUE" />
        <input type="hidden" name="id" value="100" />
        <input type="hidden" name="do" value="add" />
    </form>
    
    <form method="post" action="cart.php" class="second">
        <label for="quantity">qty</label>
        <input type="text" name="quantity" id="quantity" value="1" />
        <input type="submit" name="submit" class="subbtn" value="go" />
        <input type="hidden" name="submitted" value="TRUE" />
        <input type="hidden" name="id" value="200" />
        <input type="hidden" name="do" value="add" />
    </form>
    
    <div id="result"></div>

At the moment I’ve got it set so that AJAX returns information to the page (just so I know it works), but this won’t happen on the actual page.

So, as far as I can tell, I need a way of POSTING $(this).parent(); $(‘[name=quantity]’).val(), but I can’t seem to find the correct syntax.

Any ideas?

Cheers,

Jon

2

I’ve solved it, but in case someone else has this problem here’s the code.



$(document).ready(function(){

    $('.subbtn').click(function(){

    $('<p id="add">Added To Cart</p>').insertAfter(this).fadeOut(3000);

     var fieldId = $(this).attr('id');

     $('#result').load('pop_up3.php', {
         'quantity': $('#quantity' + fieldId).val(),
         'id': $('#id' + fieldId).val(),
         'submitted': 'TRUE',
         'do': 'add'
      });

      return false;

      });

});





<form method="post" action="pop_up3.php" class="first" name="100">
        <label for="quantity">qty</label>
        <input type="text" name="quantity" id="quantity100" value="1" />
        <input type="submit" name="submit" class="subbtn" value="go" id="100" />
        <input type="hidden" name="submitted" value="TRUE" />
        <input type="hidden" name="id" id="id100" value="100" />
        <input type="hidden" name="do" value="add" />
    </form>

    <form method="post" action="pop_up3.php" class="second" name="200">
        <label for="quantity">qty</label>
        <input type="text" name="quantity" id="quantity200" value="1" />
        <input type="submit" name="submit" class="subbtn" value="go" id="200" />
        <input type="hidden" name="submitted" value="TRUE" />
        <input type="hidden" name="id" id="id200" value="200" />
        <input type="hidden" name="do" value="add" />
    </form>

    <div id="result"></div>

By the way, all the html will obviously be generated dynamically with PHP/MySQL.

Cheers,

Jon