Как получить содержащую форму ввода?

106

Мне нужно получить ссылку на родительский элемент FORM для INPUT, когда у меня есть только ссылка на этот INPUT. Возможно ли это с помощью JavaScript? Если хотите, используйте jQuery.

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

Это не работает:

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

alert($(form).attr("name"));
Ропста
источник

Ответы:

185

Нативные элементы DOM, которые являются входами, также имеют formатрибут, указывающий на форму, к которой они принадлежат:

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

Согласно w3schools , .formсвойство полей ввода поддерживается IE 4.0+, Firefox 1.0+, Opera 9.0+, а это еще больше браузеров, которые гарантирует jQuery, поэтому вам следует придерживаться этого правила.

Если бы это был элемент другого типа (не элемент <input>), вы могли бы найти ближайшего родителя с помощью closest:

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

Также см. Эту ссылку MDN на formсвойстве HTMLInputElement:

Паоло Бергантино
источник
Хорошо, это работает .. Об атрибуте формы. Я только что попробовал, и это тоже работает. Но вы говорите, что это не поддерживается во всех браузерах?
Ropstah,
Я почти уверен, что это так. Я просто не уверен на 100%, поэтому не хочу ничего обещать. Я изучаю это прямо сейчас ...
Паоло Бергантино
5
Используйте element.form - он будет работать в большем количестве браузеров, чем jQuery. Это также одна ссылка на свойство, поэтому она будет примерно в тысячу раз эффективнее, чем переход по дереву DOM с помощью closest ().
NickFitz,
1
Я согласен. Как я уже сказал, я просто изначально не был уверен, широко ли реализовано свойство формы во всех распространенных браузерах. Я отредактировал свой ответ, чтобы более подробно указать это как лучший вариант, а я оставлю самый близкий как лакомый кусочек, если это был другой тип элемента.
Паоло Бергантино,
Кажется, он также работает с другими типами ввода, такими как select. Хорошо знать.
Falk
42

Каждый вход имеет formсвойство, указывающее на форму, к которой он принадлежит, так просто:

function doSomething(element) {
  var form = element.form;
}
Гарет
источник
4

Я использую немного jQuery и старый стиль javascript - меньше кода

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

Это полная ссылка на форму, содержащую элемент

Найджел Франсуа
источник
3
Вы в основном говорите: «Сделайте это объектом jQuery, а затем сделайте его не объектом jQuery».
isherwood 06
1
блин, а почему бы просто не сделать $(this.form)?
Андре Фигейредо
3

Используя jQuery :

function doSomething(element) {
    var form = $(element).closest("form").get().
    //do something with the form.
}
Yfeldblum
источник
2

Если вы используете jQuery и имеете дескриптор для любого элемента формы, вам необходимо получить (0) элемент перед использованием .form

var my_form = $('input[name=first_name]').get(0).form;
Стивен Райт
источник
2
function doSomething(element) {
  var form = element.form;
}

и в html вам нужно найти этот элемент и добавить атрибутную "форму" для подключения к этой форме, пожалуйста, обратитесь к http://www.w3schools.com/tags/att_input_form.asp, но этот атрибут формы не поддержка IE , т. е. вам нужно напрямую передать идентификатор формы.

阳光 Эми
источник
2

Мне нужно было использовать element.attr('form')вместо element.form.

Я использую Firefox в Fedora 12.

Ников
источник
0

просто как:

alert( $(this.form).attr('name') );
Sadnix
источник
0

И еще одно ....

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
Jadeye
источник
0

Этот пример функции Javascript вызывается прослушивателем событий для идентификации формы.

function submitUpdate(event) {
    trigger_field = document.getElementById(event.target.id);
    trigger_form = trigger_field.form;
STEM FabLab
источник
-2

это сработает? (оставив действие пустым, форма тоже отправляется сама себе, верно?)

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

"this" будет элементом select, .form - его родительской формой. Правильно?

Джош П.
источник