使用 jQuery 將輸入按鈕變成提交按鈕是觸發提交事件

Question

我正在處理旋轉木馬表單，並希望在達到邊界時多用途控制按鈕。 原始狀態具有Previous 和Next 的預期操作。 當通過單擊下一個按鈕到達最終視圖時，我正在檢查視口的當前位置並使用這段代碼將按鈕轉換為提交，

這是我正在操作的 HTML，它只是一個輸入按鈕，

<input type="button" id="next" value="Next">

以及隨附的 jQuery，它從 EventHandler 為輸入觸發。

if (trigger == "next") {
  console.log("Current: " + currentPosition);
  if (currentPosition > MIN_BOUND) {
    currentPosition -= FORM_WIDTH;
    if (currentPosition == MIN_BOUND) {
      $("#next").attr("type", "submit");
      $("#next").val("Submit");
    }
  }
}

這個動作符合我的預期，但另外它還在提交表單，這是我沒想到的。 我很好奇為什么會發生這種情況。

編輯：順便說一句。 使用輪播作為表單並不是我想過要做的事情，我的主管建議我開發這個。 我的初衷是長表單或者只是使用ajax調用來動態存儲信息和交換內容。 “輪播表格”甚至是個好主意嗎？ 我不記得自己遇到過他們。 我確實預先加載了所有東西，因為它感覺非常快，並且從 UX 的角度來看，進度條會有所幫助，因為我知道對我的期望。

Answer 1

在更改按鈕類型之前讓點擊完成：

if (currentPosition == MIN_BOUND) {
  setTimeout(function(){
    $("#next").attr("type", "submit");
    $("#next").val("Submit");
  }, 10);
}

Answer 2

防止默認行為就是所需要的。 一個簡單的解決方案，但我認為不會奏效，因為我認為這也會阻止提交按鈕的默認行為，但事實並非如此。

    if (currentPosition == MIN_BOUND) {
      event.preventDefault();
      $("#next").attr("type", "submit");
      $("#next").val("Submit");
    }

允許我在狀態轉換期間阻止默認提交，但在下次單擊期間也保留了提交按鈕功能，因為默認行為只會在更改期間被阻止。

我找不到類似的問題來比較這一系列事件，所以希望這個簡單的解決方案能讓我以外的人受益。