CODEWITHSUNDEEP
javascriptjqueryformsinput
Ropstah
Ropstah

Reputation: 17804

How to get the containing form of an input?

I need to get a reference to the FORM parent of an INPUT when I only have a reference to that INPUT. Is this possible with JavaScript? Use jQuery if you like.

function doSomething(element) {
    //element is input object
    //how to get reference to form?
}

This doesn't work:

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

alert($(form).attr("name"));

Upvotes: 136

Views: 179789

Answers (11)

STEM FabLab
STEM FabLab

Reputation: 370

This example of a Javascript function is called by an event listener to identify the form

function submitUpdate(event) {
    trigger_field = document.getElementById(event.target.id);
    trigger_form = trigger_field.form;

Upvotes: 2

Nikov
Nikov

Reputation: 21

I needed to use element.attr('form') instead of element.form.

I use Firefox on Fedora 12.

Upvotes: 2

Jadeye
Jadeye

Reputation: 4309

And one more....

var _e = $(e.target); // e being the event triggered
var element = _e.parent(); // the element the event was triggered on
console.log("_E " + element.context); // [object HTMLInputElement]
console.log("_E FORM " + element.context.form); // [object HTMLFormElement]
console.log("_E FORM " + element.context.form.id); // form id

Upvotes: 0

sadnix
sadnix

Reputation: 113

simply as:

alert( $(this.form).attr('name') );

Upvotes: -1

Josh P
Josh P

Reputation: 1355

would this work? (leaving action blank submits form back to itself too, right?)

<form action="">
<select name="memberid" onchange="this.form.submit();">
<option value="1">member 1</option>
<option value="2">member 2</option>
</select>

"this" would be the select element, .form would be its parent form. Right?

Upvotes: -2

阳光Emi
阳光Emi

Reputation: 143

function doSomething(element) {
  var form = element.form;
}

and in the html, you need to find that element, and add the attribut "form" to connect to that form, please refer to http://www.w3schools.com/tags/att_input_form.asp but this form attr doesn't support IE, for ie, you need to pass form id directly.

Upvotes: 3

Paolo Bergantino
Paolo Bergantino

Reputation: 488434

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:

Upvotes: 228

Nigel Francois
Nigel Francois

Reputation: 57

I use a bit of jQuery and old style javascript - less code

$($(this)[0].form)

This is a complete reference to the form containing the element

Upvotes: 4

Steven Wright
Steven Wright

Reputation: 29

If using jQuery and have a handle to any form element, you need to get(0) the element before using .form

var my_form = $('input[name=first_name]').get(0).form;

Upvotes: 2

Gareth
Gareth

Reputation: 138072

Every input has a form property which points to the form the input belongs to, so simply:

function doSomething(element) {
  var form = element.form;
}

Upvotes: 57

yfeldblum
yfeldblum

Reputation: 65435

Using jQuery:

function doSomething(element) {
    var form = $(element).closest("form").get().
    //do something with the form.
}

Upvotes: 4

Related Questions