submit a form in jQuery [duplicate]

Try to use the .submit() function to manually trigger the form's submission,

$('#add-to-cart').submit(); 

You can use the .submit() function to submit your form through id's ..

you need to try like this. otherwise you cant get result.

<form id="add-to-cart" action="http://example.com/add_to_form" method="post"> <div> <input type="hidden" name="cartkey" value=""> <input type="hidden" name="id" value=""> <a href="#" id="10" class="buy-now-button">buy Now</a> </div> <div> <a href="#" id="12" class="buy-now-button">buy Now</a> </div> <div> <a href="#" id="19" class="buy-now-button">buy Now</a> </div> </form> <script> $('.buy-now-button').click(function(){ $('[name="id"]').val($(this).attr("id")); $('#add-to-cart').submit(); }); </script> 

As mentioned in this SO article, you can post back the value of a button if you give your submit button a name property (and obviously, a value to post).

From the linked question (with corrected code snippet):

<input type="submit" name="respond" value="Confirm" class="btn_confirm" /> <input type="submit" name="respond" value="Ignore" class="btn_ignore" /> 

The "response" value that will be posted back to the server will contain either "Ignore" or "Confirm", depending on which button was clicked.

I would suggest adding these attributes so the form submission will send back the value you want, and no custom code or custom event is required. That should keep it easier to understand.

 <form id="add-to-cart" action="test.php" method="post"> <div> <input type="hidden" name="cartkey" value=""> <input type="hidden" name="id" value="10"> <a href="#" id="10" class="buy-now-button">buy Now</a> </div> <div>`enter code here` <input type="hidden" name="cartkey" value=""> <input type="hidden" name="id" value="12"> <a href="#" id="12" class="buy-now-button">buy Now</a> </div> <div> <input type="hidden" name="cartkey" value=""> <input type="hidden" name="id" value="19"> <a href="#" id="19" class="buy-now-button">buy Now</a> </div> <input type="hidden" name="currentId" id="currentId" > </form> <script> $( ".buy-now-button" ).click(function() { $( "#currentId" ).val(this.id); $( "#add-to-cart" ).submit(); }); </script> Your can get the current id from $_POST['currentId'] 

As you have several inputs with the same name, your form looks more like three forms.

<form class="add-to-cart" action="http://example.com/add_to_form" method="post"> <input type="hidden" name="cartkey" value=""> <input type="hidden" name="id" value="10"> <button type="submit">buy Now</button> </form> <form class="add-to-cart" action="http://example.com/add_to_form" method="post"> <input type="hidden" name="cartkey" value=""> <input type="hidden" name="id" value="12"> <button type="submit">buy Now</button> </form> <form class="add-to-cart" action="http://example.com/add_to_form" method="post"> <input type="hidden" name="cartkey" value=""> <input type="hidden" name="id" value="19"> <button type="submit">buy Now</button> </form> 

Now if you want to submit your form(s) via ajax, you can do something like:

$(".add-to-cart").on("submit", function(e) { e.preventDefault(); e.stopPropagation(); $.ajax({ url: $(this).attr("action"), method: "POST", data: $(this).serialize() }); }); 

UPDATE:

But unless you want a fallback in case javascript is deactivated, you don't need any form:

<a href="#" id="10" class="buy-now-button">buy Now</a> <a href="#" id="12" class="buy-now-button">buy Now</a> <a href="#" id="19" class="buy-now-button">buy Now</a> 

JavaScript:

$(".buy-now-button").on("click", function(e) { e.preventDefault(); e.stopPropagation(); $.ajax({ url: "http://example.com/add_to_form", method: "POST", data: {id: $(this).attr("id")} }); });