SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2008
    Location
    Gloucestershire, UK
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery AJAX post from multiple forms on the same page

    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:

    Code:
    $(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

    HTML Code:
    <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. #2
    SitePoint Zealot
    Join Date
    Jun 2008
    Location
    Gloucestershire, UK
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've solved it, but in case someone else has this problem here's the code.

    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;
                
          });
                
    });
    HTML Code:
    <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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •