in jquery, how can i reference current form from button click

Question

I have a form below; I have changed the submit button to just type "Button" so I would be able to run some JavaScript before submitting the form:

Here is my form:

<form action="/Cart" method="post">
     <input type="hidden" name="name" value="12" />
     <input type="button" class="addToCartButton" value="Add to Cart" />
 </form>

Here is my initial event handler:

$(document).ready(function () {
    $('.addToCartButton').click(function () {

       //need to reference current form here
       //need to reference the hidden input with name="Name" above
    });
});

I have a number of these forms on the same page so I need to relatively reference the form and some other inputs inside that form. What is the best way to doing it? I was thinking about putting some prefix that would be unique to each form and then using that in the selector but that seems very hacky ...

David Thomas · Accepted Answer · 2011-08-22 13:41:42Z

15

This should work:

$(document).ready(function () {
    $('.addToCartButton').click(function () {

       //need to reference current form here
       $(this).closest('form');
       //need to reference the hidden input with name="Name" above
       $(this).closest('form').find('input[name="name"]');
    });
});

answered Aug 22, 2011 at 13:41

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

Comments

Dennis · Accepted Answer · 2011-08-22 13:41:19Z

5

jQuery closest() will travel up the tree and return the first element that matches the selector:

$(this).closest("form");

answered Aug 22, 2011 at 13:41

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

2 Comments

leora Over a year ago

htanks for the quick response. what about referencing the other hidden fields inside the form, (now that you have the reference)

Dennis Over a year ago

As others have pointed out, you can use find('input[name="name"]') although you might want to go with a more descriptive value than name, possibly formName?

J. Holmes · Accepted Answer · 2011-08-22 13:42:24Z

3

 $(this).siblings("input[name='name']"); // the field
 $(this).closest("form");  // the form

answered Aug 22, 2011 at 13:42

J. Holmes

18.6k5 gold badges49 silver badges52 bronze badges

Comments

Shawn Chin · Accepted Answer · 2011-08-22 13:42:17Z

1

 $('.addToCartButton').click(function () {

       //need to reference current form here
       var the_form = $(this).closest("form");

       //need to reference the hidden input with name="Name" above
       var the_input = the_form.find('input[name="name"]');
  });

answered Aug 22, 2011 at 13:42

Shawn Chin

87.4k20 gold badges168 silver badges193 bronze badges

Collectives™ on Stack Overflow

in jquery, how can i reference current form from button click

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related