Как отправить форму, которая была перехвачена с помощью event.preventDefault ()

Question

Как отправить форму, которая была перехвачена с помощью event.preventDefault ()

0

У меня простая форма ванили с id = "edit_profile".

Когда форма отправлена, я хочу ее перехватить и проверить, нужно ли мне геокодировать адрес через google-карты api, и если не продолжать и представить в любом случае.

Что-то вроде:

$('#edit_profile').on('submit', function(event) {
    event.preventDefault();
    if ( some test ) {
        geocode_address( address, this ); // the api callback will handle form submit
    } else {
    // we want to go ahead and submit the form
    this.submit();
    }
});

Проблема заключается в том, что this.submit() выбрасывает ошибку TypeError: Property 'submit' of object #<HTMLFormElement> is not a function

Я недавно что-то прочитал, но теперь не могу найти, что нужно использовать собственный JavaScript для отправки формы, а не jQuery (я предполагаю, что обработчик события jQuery для формы submit уже был указан для предотвращенияDefault).

Но если я попробую вариант, например document.getElementById('edit_profile').submit(); или document.forms[0].submit(); Я получаю ту же ошибку или около нее.

terraling 21 фев. 2014, в 23:03

Источник

Теги:

javascript

jquery

forms

form-submit

preventdefault

3 ответа

2

Элементы DOM не имеют метода .submit - но объекты jQuery (только для элементов form) - в основном, вы забыли обернуть this в jQuery:

$(this).submit();

Ссылка: https://api.jquery.com/submit/

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

Я вижу, откуда вы получаете сценарий с бесконечным циклом. Фактически вы должны установить, чтобы обработчик запускался, когда вы нажимаете кнопку "Отправить" button а не "фактический".

На данный момент вы обнаруживаете, что формы submit действие и предотвращают действие по умолчанию (которое отправляется), - тогда вы делаете что-то и вызываете submit на this. Хорошо, что вызовет обработчик для формы submit, что снова предотвратит действие по умолчанию! Итак, словом, поставьте обработчик на кнопку "Отправить", запретите действие по умолчанию, выполните логику, затем вызовите $("#edit_profile").submit()

tymeJV 21 фев. 2014, в 19:02

0

В самом деле? Я часто читал о нативной отправке формы javascript, например, здесь: w3schools.com/jsref/met_form_submit.asp Обтекание 'this', чтобы сделать его объектом jQuery, создает бесконечный цикл.
terraling 21 фев. 2014, в 22:09
0

Включение this в объект jQuery НЕ устанавливает бесконечный цикл, вам нужно все время использовать $(this) в jQuery!
tymeJV 21 фев. 2014, в 22:11
0

но вам не нужен jquery, чтобы использовать this , вам нужно использовать только $(this) если вы хотите манипулировать this с помощью jquery. Бесконечный цикл может быть неправильным названием ошибки, но я слишком долго вставляю сюда в любом случае. Использование $ (this) означает, что я перехватываю отправку формы, затем отправляю ее, перехватываю эту отправку, отправляю ее, перехватываю эту отправку, отправку и т. Д. И т. Д.
terraling 21 фев. 2014, в 22:20
0

@terraling - Думаю, мы оба немного запутались, this ссылка на элемент form или на кнопку, на которую вы нажали? Ваша функция должна запускаться, когда вы нажимаете кнопку «Отправить», затем вы запрещаете действие по умолчанию, затем выбираете цель для формы и вызываете функцию submit - не запрещайте настройку по умолчанию в самой форме.
tymeJV 21 фев. 2014, в 22:22
0

Во-первых, спасибо, что потратили время на это. Я поиграюсь с перехватом клика, а не отправки, хотя я бы отметил , что документы jquery для submit () api.jquery.com/submit ) используют примеры перехвата отправки формы, а не нажатия кнопки, так что это может потребовалось бы в этом случае, но я не отклонил бы это вообще. Я доложу ...
terraling 21 фев. 2014, в 22:40
0

@terraling - просто прочитайте через документ еще немного, попробуйте return true если вы хотите, чтобы ваша форма отправляла, а не this.submit()
tymeJV 21 фев. 2014, в 23:03
0

нативный элемент JS имеет метод sumit ().
Arnold Parge 23 окт. 2018, в 17:37

Показать ещё 5 комментариев

0

Почему бы не переупорядочить код что-то вроде этого

$('#edit_profile').on('submit', function(event) {
  if ( some test ) {
    event.preventDefault();
    geocode_address( address, this ); // the api callback will handle form submit
  } else {
    // we want to go ahead and submit the form
    // this.submit(); // no need to call explicitly
  }
});

Это не сработает, если вы хотите иметь обратный вызов в some test но это не похоже на ваш код.

amitamb 21 фев. 2014, в 21:51

0

Спасибо amitamb. Заметьте, что в вашем примере предложение else {} на самом деле является избыточным, потому что после сбоя теста if в конце анонимной функции есть неявный возврат true, который в любом случае инициирует отправку.
terraling 24 фев. 2014, в 12:12
0

Спасибо @terraling, обновлено.
amitamb 25 фев. 2014, в 02:20

Ещё вопросы

В самом деле? Я часто читал о нативной отправке формы javascript, например, здесь: w3schools.com/jsref/met_form_submit.asp Обтекание 'this', чтобы сделать его объектом jQuery, создает бесконечный цикл.
Включение this в объект jQuery НЕ устанавливает бесконечный цикл, вам нужно все время использовать $(this) в jQuery!
но вам не нужен jquery, чтобы использовать this , вам нужно использовать только $(this) если вы хотите манипулировать this с помощью jquery. Бесконечный цикл может быть неправильным названием ошибки, но я слишком долго вставляю сюда в любом случае. Использование $ (this) означает, что я перехватываю отправку формы, затем отправляю ее, перехватываю эту отправку, отправляю ее, перехватываю эту отправку, отправку и т. Д. И т. Д.
@terraling - Думаю, мы оба немного запутались, this ссылка на элемент form или на кнопку, на которую вы нажали? Ваша функция должна запускаться, когда вы нажимаете кнопку «Отправить», затем вы запрещаете действие по умолчанию, затем выбираете цель для формы и вызываете функцию submit - не запрещайте настройку по умолчанию в самой форме.
Во-первых, спасибо, что потратили время на это. Я поиграюсь с перехватом клика, а не отправки, хотя я бы отметил , что документы jquery для submit () api.jquery.com/submit ) используют примеры перехвата отправки формы, а не нажатия кнопки, так что это может потребовалось бы в этом случае, но я не отклонил бы это вообще. Я доложу ...
@terraling - просто прочитайте через документ еще немного, попробуйте return true если вы хотите, чтобы ваша форма отправляла, а не this.submit()
нативный элемент JS имеет метод sumit ().
Спасибо amitamb. Заметьте, что в вашем примере предложение else {} на самом деле является избыточным, потому что после сбоя теста if в конце анонимной функции есть неявный возврат true, который в любом случае инициирует отправку.

terraling · Accepted Answer · 2014-02-24T11-30-00.000Z

Я отвечаю на собственный вопрос, потому что решение было настолько неожиданным и простым, что оно повторяется. Полный кредит Крису Батлеру для ответа на этот связанный вопрос: Невозможно "отправить()" форму html после перехвата отправки с помощью javascript (заметьте, его не был принят).

Ответ: если вы назовете & #id ваши кнопки отправки "submit", которые столкнутся с именем встроенного метода JavaScript.submit(), который больше не будет работать и даст ошибку типа, описанную в вопросе.

Поэтому решение в моем случае состояло в том, чтобы переименовать мою кнопку отправки в другое.

Напомним:

Чтобы перехватить отправку формы, вы можете перехватить щелчок на кнопке отправки или перехватить представление формы. Если ваша цель - перехватить отправку формы, тогда сделайте это, а не событие click на кнопке submit, так как формы могут быть отправлены другими событиями, такими как нажатие ввода в текстовое поле.

Если вы перехватите форму через jQuery с помощью, например, $("#myForm").on("submit", function() {...}) а затем продолжайте передавать обработку отправки другой функции (например, как в вопрос о вызове геокодирования api), то эта функция должна будет инициировать отправку формы посредством непосредственного действия на элемент формы DOM (например, 'document.getElementById(' myForm '). submit()), который будет отправлять формы, не вызывая событие onsubmit, чтобы начальный перехват не запускался снова, создавая бесконечный цикл, как если бы вы использовали jQuery для запуска submit.