jQuery form submit as per referenced form

Question

Here is one form example. It is working good without any issue.

    <form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
    <input type="hidden" name="cartkey" value="">
    <input type="hidden" name="id" value="10">
    <button type="submit" value="submit"> Add to Cart</button>

<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="3">
<button type="submit" value="submit"> Add to Cart</button>

<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="5">
<button type="submit" value="submit"> Add to Cart</button>

Now I have to create the same form but a little modification needed. I have my markup like this

    <form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8">
    <button type="submit" value="submit" data-value="10" data-name="id">Try Now</button>
    <button type="submit" value="submit" data-value="3" data-name="id">Try Now</button>
    <button type="submit" value="submit" data-value="5" data-name="id">Try Now</button>
 </form>   
To submit the form I have used this jQuery. 


<script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery('button[type=submit]').click(function() {
        var Id = jQuery(this).attr('data-value');
        var Name = jQuery(this).attr('data-name');
        alert(Name);
      })
    });
  </script>

But from this point of jQuery I don't know what to do next. So can someone kindly tell me how to submit the form by jquery with the same values as used above markup?

Update Yes I can change my markup if you think so.

Any feedback on my answer? – Ionică Bizău Jun 13 '14 at 12:31 — Ionică Bizău, Jun 13 '14 at 12:31

score 0 · Answer 1 · edited May 23 '17 at 12:11

First of all, your HTML is not correct. Move the inputs inside of the form:

<form action="..." class="form-horizontal" method="post" accept-charset="utf-8">
    <input type="hidden" name="cartkey" value="">
    <input type="hidden" name="id" value="10">
    <button type="submit" value="submit"> Add to Cart</button>
</form>

You can have any number of forms like above. In the JavaScript side you have to catch submit event for all forms. In the submit handler, this will be the form that was submitted.

$(document).ready(function () {
    $("form").on("submit", function () {
        $.ajax({
            type: "POST",
            url: formUrl,
            data: $(this).serializeArray(),
            success: function (data) {
                /* handle success */
            },
            error: function (data) {
                /* handle error */
            },
            dataType: "json" // remove this if the server doesn't send json data
        });
        return false; // prevent default browser behavior 
    });
});

Note $(this).serializeArray() - this returns an array like this:

[{
  name: "some-input-name",
  value: "some-input-value"
}, ...

Also, you may checkout the return false usage: When and why to 'return false' in JavaScript?

jQuery form submit as per referenced form

1 Answers1