CODEWITHSUNDEEP
phpjqueryforms
user3813156
user3813156

Reputation: 43

Processing forms with jQuery

I have some PHP code that generates out a bunch of store items from my database. Each item has a quantity text box and an add to cart submit button and a hidden value with the special ID.

Here is basically how my form is generated:

<form class='form-inline' id='addtocart_form' action='
additem.php?iid=$SaleItem_Id&u=".$_SESSION['id']."  ' method='post' role='form'>
  <div class='form-group'>

<div class='input-group'>
  <input type='text' class='form-control' style= 'float: left; width:50%;' id='quantity' 
    name='quantity' value='0'></input>
  <button type='submit' name='add_to_cart' id='add' class='btn btn-success'>Add to 
    Cart</button>
  </div>
<input type='text' name='$SaleItem_Id' style='display: none;' id='$SaleItem_Id' 
  value='$SaleItem_Id'>
</form>

My cart works perfectly, except it refreshes and puts you back up to the top of the screen. So then I decided to implement jQuery. All of these generated forms have the same id: addtocart_form. 

$(function() {
    $("#addtocart_form").on('submit' , function(e) {
        e.preventDefault();

        var thisForm = $(this);
        var quantity = $("#quantity").val();
        var dataString = $("#addtocart_form").serialize();

        $.ajax({
            type: "POST",
            url: thisForm.attr('action'),
            data: dataString,
        });

        $("#quantity").val("0");

        return false;
    });
});

The first item that is displayed on the screen works perfectly. It adds the item to the cart without refreshing the screen.

All of the other forms on the page are being submitted without the jQuery. They add the item, but redirect to the URL of my action.

How can I fix this without rewriting my entire store? I assume it has something with which form is being told to submit.

Upvotes: 1

Views: 60

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

The id attribute should be unique in same document so try to replace the id addtocart_form by class, and all the other id's by classes to avoid duplicated id.

HTML :

<form class='form-inline addtocart_form' action=...

JS :

$("body").on('submit', '.addtocart_form', function(e) {
    e.preventDefault();

    var quantity = $(this).find(".quantity").val();
    var dataString = $(this).serialize();
    var action = $(this).attr('action')

    $.ajax({
        type: "POST",
        url: action,
        data: dataString,
    });

    $(this).find(".quantity").val("0");

    return false;
});

Hope this helps.

Upvotes: 1

devlin carnate
devlin carnate

Reputation: 8592

You should not have more than one element with the same id on a page. If all of your forms use the same id, that's a problem.

Since you are using JQuery with AJAX, there's really no need to use a form at all. Just use a regular button (type="button") and tie a click event to it. Find the parent div of the button and get the values of the inputs within that div.

If your markup looks like this:

<div class='form-group'>
  <input type='text' class='form-control quantity' style='float: left; width:50%;' value='0'>
  <button type='button' class='btn btn-success add'>Add to Cart</button>
  <input type='text' style='display: none;' class='saleItem_Id'>
</div>
<div class='form-group'>
  <input type='text' class='form-control quantity' style='float: left; width:50%;' value='0'>
  <button type='button' class='btn btn-success add'>Add to Cart</button>
  <input type='text' style='display: none;' class='saleItem_Id'>
</div>

You can iterate over the inputs within the div like so:

$(".add").on('click', function() {
  var parentDiv = $(this).closest("div");
  //in this example, you only have one element, but this is how you would iterate over multiple elements
  parentDiv.children('input').each(function() {
    console.log($(this).prop('class'));
    console.log($(this).val());
  });
  //do your ajax stuff
});

JS Fiddle demo

Upvotes: 0

Related Questions