Есть ли лучшее решение jQuery для this.form.submit();?

Я хочу вызвать событие отправки формы, в которой находится текущий элемент. Иногда я знаю, что работает:

this.form.submit();

Мне интересно, есть ли лучшее решение, возможно, с помощью jQuery, так как я не уверен, что 100% метод работает в каждом браузере.

Edit:

Ситуация, которая у меня есть, выглядит следующим образом:

<form method="get">
    <p><label>Field Label
        <select onchange="this.form.submit();">
            <option value="blah">Blah</option>
            ....
        </select></label>
    </p>
</form>

Я хочу иметь возможность отправить форму при изменении <select>.

То, что я ищу, - это решение, которое работает в любом поле в любой форме, не зная идентификатора или имени в форме. $('form:first') и $('form') не будут работать, потому что форма может быть третьей на странице. Кроме того, я уже использую jQuery на сайте, поэтому использование немного jQuery - это не большая проблема.

Итак, есть ли способ получить jQuery форму, в которой находится input/select/textarea?

Ответы

Ответ 1

Я думаю, что вы ищете что-то вроде этого:

$(field).closest("form").submit();

Например, чтобы обработать событие onchange, у вас будет следующее:

$(select your fields here).change(function() {
    $(this).closest("form").submit();
});

Если по какой-либо причине вы не используете jQuery 1.3 или выше, вы можете вызвать parents вместо closest.

Ответ 2

this.form.submit();

Это, вероятно, лучший выбор. Особенно, если вы не используете jQuery в своем проекте, нет необходимости добавлять его (или любую другую JS-библиотеку) именно для этой цели.

Ответ 3

Вы всегда можете JQuery-ize в вашей форме .submit, но он может просто вызвать одно и то же:

$("form").submit(); // probably able to affect multiple forms (good or bad)

// or you can address it by ID
$("#yourFormId").submit();

Вы также можете прикрепить функции к событию отправки, но это другая концепция.

Ответ 4

Как и в ответе Matthew's, я просто обнаружил, что вы можете сделать следующее:

$(this).closest('form').submit();

Неправильно: проблема с использованием родительской функциональности заключается в том, что поле должно быть непосредственно внутри формы для работы (не внутри tds, меток и т.д.).

Я исправляюсь: родительский s (с s) также работает. спасибоs Paolo для указания этого.

Ответ 5

Я обнаружил, что с помощью jQuery лучшим решением является

$(this.form).submit()

С помощью этого оператора плагины jquery (например, плагин jquery form) работает корректно, а служебные служебные данные jQuery DOM минимизируются.

Ответ 6

Ваш вопрос в чем-то смущает тем, что вы не объясняете, что вы подразумеваете под "текущим элементом".

Если у вас есть несколько форм на странице со всеми типами входных элементов и кнопкой типа "отправить", то нажатие "enter" после заполнения любого из полей приведет к отправке этой формы. Вам не нужен Javascript.

Но если у вас есть несколько кнопок "отправить" в форме и других входных данных (например, "редактировать строку" и/или "удалить строку" в таблице), то вы можете разместить эту строку.

Другим способом (без необходимости использования Javascript) может быть присвоение разных значений всем вашим кнопкам (типа "submit" ). Вот так:

<form action="...">
    <input type="hidden" name="rowId" value="...">
    <button type="submit" name="myaction" value="edit">Edit</button>
    <button type="submit" name="myaction" value="delete">Delete</button>
</form>

Когда вы нажимаете кнопку, будет отправлена ​​только форма, содержащая кнопку, и будет отправлено только значение выбранной вами кнопки (по другим входным значениям).

Затем на сервере вы просто читаете значение переменной "myaction" и решаете, что делать.

Ответ 7

В JQuery вы можете позвонить

$("form:first").trigger("submit")

Не знаю, намного ли это лучше. Я думаю, form.submit(); является довольно универсальным.

Ответ 8

<form method="get">
   <p><label>Field Label
      <select onchange="this.form.submit();">
         <option value="blah">Blah</option>
            ....
     </select>
     </label>
   </p>
    **<!-- <input name="submit" type="submit" /> // name="submit_new_name" -->**
  </form>

<!-- 

   this.form.submit == this.form.elements['submit'];

-->