2009-06-13 9 views
77

Мне нужно получить ссылку на родительский элемент 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")); 
+1

$ (элемент) .parents ('форма: первый'); работает для меня, используя jQuery 1.4.2 (да, старый) – Kreker

ответ

136

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

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

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

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

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

Кроме того, эта ссылка MDN на form свойстве HTMLInputElement:

+0

Хорошо, что это работает .. Об атрибуте формы. Я просто попробовал, и это тоже работает. Но это не поддерживается в браузерах, которые вы говорите? – Ropstah

+0

Я уверен, что это так. Я просто не уверен на 100%, поэтому я не хочу ничего обещать. Я изучаю его прямо сейчас ... –

+4

Используйте element.form - он будет работать в более браузерах, чем это делает jQuery. Это также одна ссылка на свойства, поэтому будет примерно в тысячу раз эффективнее, чем идти вверх по дереву DOM с ближайшим(). – NickFitz

3

Использование jQuery:

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

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

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

это не работает как-то ..? – Ropstah

+0

@ Ropstah-- это поздно, но 'element' - это просто узел DOM, а не объект jquery. Использование jquery было бы $ (element) .attr ('form'), как отмечает Паоло в принятом ответе. – ps2goat

2

мне нужно использовать element.attr («форма») вместо элемента .FORM

Я использую Firefox на Fedora 12

2

При использовании JQuery и имеет ручку для любого элемента формы, вы должны получить (0) элемент перед использованием .FORM

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

Я использую немного JQuery и старого стиля JavaScript - меньше кода

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

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

+1

'$ (this.form)'. – Endless

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

и в HTML , вам нужно найти этот элемент и добавить атрибут «form» для подключения к этой форме, пожалуйста, обратитесь к http://www.w3schools.com/tags/att_input_form.asp , но эта форма attr не поддерживает IE, т. Е. Вам нужно передать форму id напрямую.

-2

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

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

«это» было бы выбрать элемент, .form будет его родительская форма. Правильно?

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 
Смежные вопросы