CODEWITHSUNDEEP
javascriptjqueryhtmlforms
overlord
overlord

Reputation: 1079

jQuery: How to get the object of the form who's submit button was clicked?

I've multiple forms in my html based web page. I have a 'Submit' button on each of the form. Whenever I fill a form and click on it's submit button, I want to know which form was submitted. Means, upon pressing a submit button I want to know the details of the associated form (all forms have the similar button). Stuff like getting the entire form object or id or name of the submitted form will also work.

My JQuery code is :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
            $( "form" ).submit(function () {
                var val = $("input[type=submit][clicked=true]").val();
                (1) console.log(val);                   
            });

            $("form input[type=submit]").click(function() {
                $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
                $(this).attr("clicked", "true");
            });
        });
</script>

My html code containing the forms is:

<!-- This is form number 1 -->
<form align="center" class="nav nav-list" id="myFormCS" method="POST" action="#" >      <!-- <- I want this info -->        
    <p> <input type="hidden" name="productid" value="4"> </p>
    <p> <input type="hidden" name="version" value="1"> </p>
    <p> <input id="field_email" type="email" placeholder="Enter email address"  name="eml1" required></p>
    <p> <input id="field_pwd1" type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" placeholder="Enter password"  name="pwd1" required> </p>

    <div class="pricing-footer">
        <input class="btn-submit-modal" type="submit" value="Free"> **<-- (1) is getting me this info**
        <input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
    </div>
</form>

<!-- This is form number 2 -->
<form align="center" class="nav nav-list" id="myFormGE" method="POST" action="#" >              
    <p> <input type="hidden" name="productid" value="14"> </p>
    <p> <input type="hidden" name="version" value="1"> </p>
    <p> <input id="field_username"  type="text" placeholder="Enter user name"   name="usrnm" required></p>
    <p> <input id="field_pwd1" type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" placeholder="Enter password"  name="pwd1" required> </p>

    <div class="pricing-footer">
        <input class="btn-submit-modal" type="submit" value="Register">
        <input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
    </div>
</form>

<!-- This is form number 3 -->
<form align="center" class="nav nav-list" id="myFormVI" method="POST" action="#" >              
    <p> <input type="hidden" name="productid" value="7"> </p>
    <p> <input type="hidden" name="version" value="2"> </p>
    <p> <input id="field_city"  type="text" placeholder="Enter city name" name="city1" required></p>
    <p> <input id="field_phone" type="text"  placeholder="Enter phone number"   name="phn1" required> </p>

    <div class="pricing-footer">
        <input class="btn-submit-modal" type="submit" value="Buy now">
        <input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
    </div>
</form>

Upvotes: 0

Views: 2904

Answers (2)

jperez
jperez

Reputation: 21

You can use a submit listener for the form and get the object. Something like this:

$("form").submit(function (e) {
    e.preventDefault();
    var form = $(this);
    console.log(form);
});

That form object is what I think you are looking for.

Upvotes: 1

cssyphus
cssyphus

Reputation: 40106

Something like this?

$("form input[type=submit]").click(function() {
    var frmID = $(this).closest('form').attr('id');
    alert(frmID);
});

jsFiddle

Upvotes: 2

Related Questions