Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I select the parent form based on which submit button is clicked?

Tags:

jquery

forms

People also ask

How do you display a form when a button is clicked?

To show or hide a form on a button click: Add a click event listener to the button element. Each time the button is clicked check if the form element is hidden. If the form is hidden, show it, otherwise hide the form.

What happens when submit button is clicked?

The form will be submitted to the server and the browser will redirect away to the current address of the browser and append as query string parameters the values of the input fields.

How do I submit a link by clicking a form?

When working with forms, to submit them input type='submit' or button type='submit' are used but in cases when it's better suited to submit the form with a regular ahref link, this technique can be used. Give the form an id then add a onClick event to the link calling native Javascript's document.

Does the submit button go inside the form?

Yes, structurally the submit button needs to be inside a form element for the document to be valid X/HTML.


You can select the form like this:

$("#submit").click(function(){
    var form = $(this).parents('form:first');
    ...
});

However, it is generally better to attach the event to the submit event of the form itself, as it will trigger even when submitting by pressing the enter key from one of the fields:

$('form#myform1').submit(function(e){
     e.preventDefault(); //Prevent the normal submission action
     var form = this;
     // ... Handle form submission
});

To select fields inside the form, use the form context. For example:

$("input[name='somename']",form).val();

I found this answer when searching for how to find the form of an input element. I wanted to add a note because there is now a better way than using:

var form = $(this).parents('form:first');

I'm not sure when it was added to jQuery but the closest() method does exactly what's needed more cleanly than using parents(). With closest the code can be changed to this:

var form = $(this).closest('form');

It traverses up and finds the first element which matches what you are looking for and stops there, so there's no need to specify :first.


To get the form that the submit is inside why not just

this.form

Easiest & quickest path to the result.


i used the following method & it worked fine for me

$('#mybutton').click(function(){
        clearForm($('#mybutton').closest("form"));
    });

$('#mybutton').closest("form") did the trick for me.


Eileen: No, it is not var nameVal = form.inputname.val();. It should be either...

in jQuery:

// you can use IDs (easier)

var nameVal =  $(form).find('#id').val();

// or use the [name=Fieldname] to search for the field

var nameVal =  $(form).find('[name=Fieldname]').val();

Or in JavaScript:

var nameVal = this.form.FieldName.value;

Or a combination:

var nameVal = $(this.form.FieldName).val();

With jQuery, you could even loop through all of the inputs in the form:

$(form).find('input, select, textarea').each(function(){

  var name = this.name;
  // OR
  var name = $(this).attr('name');

  var value = this.value;
  // OR
  var value = $(this).val();
  ....
  });