JQuery найти родительскую форму

219

у меня есть этот HTML

<ul>
    <li><form action="#" name="formName"></li>
    <li><input type="text" name="someName" /></li>
    <li><input type="text" name="someOtherName" /></li>
    <li><input type="submit" name="submitButton" value="send"></li>
    <li></form></li>
</ul>

Как выбрать форму, input[name="submitButton"]частью которой является? (когда я нажимаю кнопку отправки, я хочу выбрать форму и добавить в нее некоторые поля)

kmunky
источник

Ответы:

485

Я бы предложил использовать closest, который выбирает ближайший соответствующий родительский элемент:

$('input[name="submitButton"]').closest("form");

Вместо фильтрации по имени, я бы сделал это:

$('input[type=submit]').closest("form");
karim79
источник
2
Может быть, мы должны добавить получение по индексу? '$ ( "вход [тип = представить]") ближайший ( "форма");'. возвращает массив форм.
sergzach
Я пытаюсь использовать вышеупомянутое таким образом: $ (". Each img"). Click (function () {$ (this) .closest ("form"). Show ();}); Но я не могу заставить его работать. : /
Алиссо
2
peterjwest ответ лучше, чем этот.
Gagarine
В HTML5 есть новый атрибут 'form', который позволяет вам размещать элемент вне родительской формы. Это должно быть проверено в первую очередь.
mcintyre321
56

Вы можете использовать ссылку на форму, которая существует на всех входах, это намного быстрее, чем .closest()(в 5-10 раз быстрее в Chrome и IE8). Работает на IE6 & 7 тоже.

var input = $('input[type=submit]');
var form = input.length > 0 ? $(input[0].form) : $();
peterjwest
источник
2
Вы упоминаете IE8. Это работает и для версий 6, 7 и 9?
Сонни
1
Это намного лучше и быстрее, как упомянул @peterjwest. Что касается IE6, я думаю, что .form для элементов ввода была на IE4, к сожалению, страница netscape dev исчезла ... и кто бы проверил Mozilla.
Мацей Лопачинский
Это гораздо более безопасный способ, чем использование, closest()так как вход может иметь собственное назначение формы: codepen.io/anon/pen/vNqEyg
Möhre
Возможно, вы использовали сокращенную запись if, чтобы сохранить код коротким, но в этом примере он только отвлекает от реального кода, который вы хотите показать (особенно для людей, незнакомых с сокращением). Я был бы за использование обычного if ().
AeonOfTime
Я бы сказал, что в этом решении слишком много помех. Если вы пойдете с этим (мое решение ниже - да, это реклама :)): stackoverflow.com/a/18921404/261332 , то вам не нужно такого рода осложнений, так как он будет просто работать, когда он должен и ничего не делай иначе.
userfuser
17

Для меня это выглядит как самый простой / быстрый:

$('form input[type=submit]').click(function() { // attach the listener to your button
   var yourWantedObjectIsHere = $(this.form);   // use the native JS object with `this`
});
userfuser
источник
2
Для меня использование $(this.form)- лучшее решение
jap1968
2

В браузерах HTML5 можно использовать inputElement.form- значение атрибута должно быть идентификатором <form>элемента в том же документе. Больше информации о MDN .

Александр Михайлов
источник