submit a form in jQuery

Question

I have a form like this

<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="10">
  <a href="#" id="10"  class="buy-now-button">buy Now</a>
  </div>
  <div>
  <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>    
</form>

and I want to submit the form using jquery by taking the id. So can someone kindly tell me how to do this?

Update You can see with each link I have the id. I just want to pass this id to the form action.

Submit where? To the form's action attribute? And why use jQuery to submit form when you can do that traditionally? — asprin, May 22 '14 at 12:04
Your HTML is not valid. You cannot duplicate IDs; they should each be unique. — PeterKA, May 22 '14 at 12:06
instead of 'id', try more meaning full name like 'product_id' or something — Aamir Afridi, May 22 '14 at 12:07

score 0 · Answer 1 · answered May 22 '14 at 12:03

0

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

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

answered May 22 '14 at 12:03

Rajaprabhu Aravindasamy

66,513
17
101
130

1

@Downvoter: can you please disclose the reason for your vote..? so that me and audience can know what's wrong in my post.. – Rajaprabhu Aravindasamy May 22 '14 at 12:05
There is no submit button in the form so I think this will not work. – Aamir Afridi May 22 '14 at 12:06
I didn't downvoted BTW :) – Aamir Afridi May 22 '14 at 12:06
1

Submit button or no submit button, the form will submit if the submit event is triggered on the form. – PeterKA May 22 '14 at 12:08
1

@AamirAfridi You *may* have issues without submit button if you listen the `submit` event. But here we trigger it, so it will work fine. – zessx May 22 '14 at 12:10

score 0 · Answer 2 · answered May 22 '14 at 12:09

0

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

answered May 22 '14 at 12:09

user3636634

44
9

arunsss · Answer 3 · 2014-05-22T12:27:05.033

    <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']

score 0 · Answer 4 · answered May 22 '14 at 12:12

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>

score 0 · Answer 5 · edited May 23 '17 at 12:05

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.

Maurice Perry · Answer 6 · 2014-05-22T12:34:43.740

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")}
    });
});

Why the added submit event? Isn't everything mentioned in that event default (or not required) behavior? Other than the Ajax call, but I see no mention of that in the question. — Flater, May 22 '14 at 12:46

submit a form in jQuery

6 Answers6