javascript - 使用 javascript NEXT 将 html 元素完全更改为另一个 <input type ="submit">

Question

我有一个多部分表单，其中:当用户填写每个页面并单击下面给出的下一个按钮时。在最后一页时，下一个按钮更改为提交元素，但我无法将数据提交到数据库(MySQL XAMPP)，我需要输入类型=“提交”而不是按钮。我想将所有按钮更改为输入类型提交。我的脚本如下:

按钮的 HTML

<div style="float:right;">
    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
    <button type="button" name="submit1" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>

脚本

function showTab1(n) {
    // This function will display the specified tab of the form...
    var x = document.getElementsByClassName("tab");
    x[n].style.display = "block";
    //... and fix the Previous/Next buttons:
    if (n == 0) {
        document.getElementById("prevBtn").style.display = "none";
    } else {
        document.getElementById("prevBtn").style.display = "inline";
    }
    if (n == (x.length - 1)) {
        document.getElementById("nextBtn").innerHTML = "Submit Form";
    } else {
        document.getElementById("nextBtn").innerHTML = "Next";
    }
}

Answer 1

在按钮下添加一个输入元素 style="display: none;"并给它一个 id="js-submit-form"

    <div style="float:right;">
        <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
        <button type="button" name="submit1" id="nextBtn" onclick="nextPrev(1)">Next</button>
        <input type="submit" id="js-submit-form" name="submit" value="Submit Form" style="display: none;">
    </div>

然后我为#nextBtn设置display:none，为#js-submit-form设置display:block

function showTab(n) {

 // This function will display the specified tab of the form ...
 var x = document.getElementsByClassName("tab");
 x[n].style.display = "block";

 // ... and fix the Previous/Next buttons:
 if (n == 0) {
  document.getElementById("prevBtn").style.display = "none";
 } else {
  document.getElementById("prevBtn").style.display = "inline";
 }

 if (n == (x.length - 1)) {
  document.getElementById("nextBtn").style.display = "none";
  document.getElementById("js-submit-form").style.display = "inline";
} else {
  document.getElementById("nextBtn").style.display = "inline";
  document.getElementById("js-submit-form").style.display = "none";
  document.getElementById("nextBtn").innerHTML = "Next";
}

 // ... and run a function that displays the correct step indicator:
 fixStepIndicator(n)

}

然后根据需要设置输入的样式。希望有帮助;-)

仅供引用，此多部分表单由 w3schools 创建