Есть ли лучшее решение для jQuery this.form.submit ();? - PullRequest
43 голосов
/ 06 января 2009

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

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?

Ответы [ 8 ]

105 голосов
/ 07 января 2009

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

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

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

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

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

24 голосов
/ 07 января 2009
this.form.submit();

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

3 голосов
/ 12 февраля 2014

Я обнаружил, что при использовании jQuery лучшее решение -

$(this.form).submit()

Используя этот оператор, плагины jquery (например, плагин формы jquery ) работают правильно, а издержки на обход DOM jquery сводятся к минимуму.

3 голосов
/ 04 апреля 2009

Аналогично ответу Мэтью , я только что обнаружил, что вы можете сделать следующее:

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

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

Я исправлен: родитель s (с) также работает. Спасибо Паоло за указание на это.

3 голосов
/ 06 января 2009

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

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

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

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

1 голос
/ 07 января 2009

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

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

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

Другим способом (не требующим Javascript) может быть присвоение разных значений всем вашим кнопкам (типа «отправить»). Как это:

<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» и решаете, что делать.

0 голосов
/ 17 июня 2009
<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'];

-->
0 голосов
/ 06 января 2009

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

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

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

...