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在我按Submit時不運行

Answer 1

我認為您的點擊處理程序返回后，它會注意到該按鈕已更改為“提交”按鈕，因此它提交了表單。 將e.preventDefault()放入更改按鈕類型的單擊處理程序中。

編寫此代碼的另一種方法是不更改按鈕類型，而只需使單擊處理程序測試您是否在最后一個選項卡上，然后在此處進行AJAX提交。

Answer 2

我通過添加一個提交按鈕解決了這個問題，該按鈕一直隱藏到最后一張幻燈片。 然后也隱藏最后一張幻燈片上的繼續按鈕。

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