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

Question

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

this.form.submit();

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

Редактировать:

Ситуация, с которой я столкнулся, заключается в следующем:

<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?

Answer 1

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

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

Например, для обработки события onchange у вас будет это:

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

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

Answer 2

this.form.submit();

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

Answer 3

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

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

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

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

Answer 4

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

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

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

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

Answer 5

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

$(this.form).submit()

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

Answer 6

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

Если у вас есть несколько форм на странице со всевозможными элементами ввода и кнопкой типа "отправить", то нажатие "enter" при заполнении любого из ее полей вызовет отправку этой формы.Там вам не нужен никакой 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" и решаете, что делать.

Answer 7

В jQuery вы можете вызвать

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

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

Answer 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'];

-->