How to Get the Containing Form of an Input

How to get the containing form of an input?

Native DOM elements that are inputs also have a form attribute that points to the form they belong to:

var form = element.form;
alert($(form).attr('name'));

According to w3schools, the .form property of input fields is supported by IE 4.0+, Firefox 1.0+, Opera 9.0+, which is even more browsers that jQuery guarantees, so you should stick to this.

If this were a different type of element (not an <input>), you could find the closest parent with closest:

var $form = $(element).closest('form');
alert($form.attr('name'));

Also, see this MDN link on the form property of HTMLInputElement:

• https://developer.mozilla.org/en/DOM/HTMLInputElement#Properties

How is it possible with input elements to get the respective parent form?

The closest() method traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string. Will return itself or the matching ancestor. If no such element exists, it returns null.

let name = document.querySelector('#name');console.log(name.closest('form'));
let name2 = document.querySelector('#name2');console.log(name2.closest('form'));

<form id="form1"><div class='form-group'><input class='form-control' id='name'></div><div class='form-group'><input class='form-control' id='email'></div></form>
<form id="form2"><div class='form-group'><input class='form-control' id='name2'></div><div class='form-group'><input class='form-control' id='email2'></div></form>

How to get the form parent of an input with jquery 1.8?

You could use the this keyword that refer in the event context to the object of the current changed element, then just use this.form to get the parent form where the current element wrapped, then call the submit() method if you want to submit it like like :

$(document).on("change", "#my_checkbox_input", function() {
    this.form.submit();
});

Or also by converting the form to jQuery object first :

$(document).on("change", "#my_checkbox_input", function() {
    $(this.form).submit();
});

And you could always use the jQuery methods .parents() or .closest() to get the parent element, in this case use the jQuery object $(this) that refer to the current element then specify the parent node name (form), like :

$(document).on("change", "#my_checkbox_input", function() {
    $(this).parents('form').submit();
});

NOTE : .closest() is more efficient than .parents() in term of speed.

Hope this helps.

Get inputs of parent form jQuery

You need to use the parent function with find if your input is directly in your form , Try this for example:

$('.toggle-btn').click(function(){
  $(this).parent().find(':input').prop('disabled', false);
}

If the input is in other elements that are inside your form, you need to use the jQuery parents function like this:

$('.toggle-btn').click(function(){
  $(this).parents('form').find(':input').prop('disabled', false);
}

get all the elements of a particular form

document.forms["form_name"].getElementsByTagName("input");

Finding the FORM that an element belongs to in JavaScript

The form a form element belongs to can be accessed through element.form.

When the element you are using as reference is not a form element, you'd still have to iterate through the parentElement or use some other kind of selector.

Using prototype, you could simplify this by using Element.up():

$(element).up('form');

Other answers to this question have pointed out how to do the same in jQuery.

How an I get all form elements (input, textarea & select) with jQuery?

Edit: As pointed out in comments (Mario Awad & Brock Hensley), use .find to get the children

$("form").each(function(){
    $(this).find(':input') //<-- Should return all input elements in that specific form.
});

forms also have an elements collection, sometimes this differs from children such as when the form tag is in a table and is not closed.

var summary = [];$('form').each(function () {    summary.push('Form ' + this.id + ' has ' + $(this).find(':input').length + ' child(ren).');    summary.push('Form ' + this.id + ' has ' + this.elements.length + ' form element(s).');});
$('#results').html(summary.join('<br />'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><form id="A" style="display: none;">    <input type="text" />    <button>Submit</button></form><form id="B" style="display: none;">    <select><option>A</option></select>    <button>Submit</button></form>
<table bgcolor="white" cellpadding="12" border="1" style="display: none;"><tr><td colspan="2"><center><h1><i><b>LoginArea</b></i></h1></center></td></tr><tr><td><h1><i><b>UserID:</b></i></h1></td><td><form id="login" name="login" method="post"><inputname="id" type="text"></td></tr><tr><td><h1><i><b>Password:</b></i></h1></td><td><input name="pass"type="password"></td></tr><tr><td><center><input type="button" value="Login"onClick="pasuser(this.form)"></center></td><td><center><br /><inputtype="Reset"></form></td></tr></table></center><div id="results"></div>

Get parent form of submit button using Javascript

You can get the id of the form containing the button which was clicked by reading the form.id property from the event target:

function sendReminder(e) {
  e.preventDefault();

  let formId = e.target.form.id;
  console.log(formId);
}

<form id="sendReminderForm{{ user.id }}" method="post" action="">
  <input type="hidden" name="policyId" value="{{ policy.id }}">
  <input type="hidden" name="userId" value="{{ user.id }}">
  <button class="btn btn-warning btn-xs" onclick="sendReminder(event)" type="submit">
     <span class="fa fa-paper-plane"></span> Remind
   </button>
</form>

---

Related Topics