Processing forms with jQuery

Question

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.

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. You should use class to bind your event and then, if needed, assign a unique id to each form (or don't use an id on the form at all if you are able to just work with classes) — devlin carnate
– devlin carnate, Commented Dec 21, 2015 at 23:51

Zakaria Acharki · Accepted Answer · 2015-12-22 00:29:45Z

1

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.

edited Dec 22, 2015 at 0:29

answered Dec 21, 2015 at 23:56

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3813156 Over a year ago

im using bootstrap, so my form class is form-inline. would that effect it negatively?

user3813156 Over a year ago

It worked. Thanks for the help! (also, I changed my quantity id to a class and my jQuery to $(".quantity").val("0"); so that it would change it back to 0)

devlin carnate Over a year ago

Assuming all forms have an input with id quantity, there is still likely invalid html, and this solution would not address that problem.

Zakaria Acharki Over a year ago

You're right @devlin, thanks for your intervention, please check my update.

Zakaria Acharki Over a year ago

@user3813156 please check my update, (quantite also should be class)

devlin carnate · Accepted Answer · 2015-12-22 00:11:03Z

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

Collectives™ on Stack Overflow

Processing forms with jQuery

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related