Ajax-форма отправки, прослушиватель событий и изменение типа кнопки отправки

Question

У меня есть одностраничный веб-сайт с формой с вкладками, где посетитель использует кнопку для перехода.На последней вкладке я хочу изменить тип кнопки на submit и использовать AJAX для отправки формы.

На каждой вкладке есть следующая кнопка, подобная этой.

<button type="button" id="nextBtn" onclick="nextPrev(1)">Continue</button>

Когда посетитель достигает последней вкладки, я использую javascript, чтобы изменить текстовое значение кнопки.

document.getElementById("nextBtn").innerHTML = "Submit";

Я бы хотел использовать AJAX для отправки формы без перезагрузки страницы.Я добавляю следующее, чтобы изменить type с button на submit.

document.getElementById("nextBtn").type = "submit";

В моем скрипте AJAX у меня есть прослушиватель событий

$(form).submit(function(e) {
  e.preventDefault(); 
  // ...

Когда моя последняя вкладказагружает Я думаю, что сценарий AJAX (и сценарий обработчика формы, указанный в action моей формы) запускается до нажатия кнопки «Отправить».

Я знаю это, потому что моя ошибка отправки формы отображается на веб-странице.

Если я затем отправляю форму, AJAX не запускается, а выполняет скрипт обработчика формы, указанный в action моей формы.Я знаю это, потому что скрипт обработчика формы загружается в окно браузера, и я получаю содержимое формы через уведомление по электронной почте.

Я не понимаю, почему: - AJAX запускается при достижении последней вкладки - но AJAX нене запускается при нажатии кнопки отправки

Answer 1

Я решил эту проблему, добавив кнопку отправки, которая остается скрытой до последнего слайда.А затем скрыть кнопку продолжения на последнем слайде тоже.

document.getElementById("nextBtn").style.display = "none"; 
document.getElementById("submit").style.display = "inline"; 

Answer 2

Я думаю, что после того, как ваш обработчик кликов возвращается, он замечает, что кнопка изменилась на кнопку отправки, поэтому он отправляет форму. Поместите e.preventDefault() в обработчик кликов, который меняет тип кнопки.

Еще один способ закодировать это - не изменить тип кнопки, а просто протестировать обработчик кликов на последней вкладке и отправить туда AJAX.