带有 onSubmit 处理程序的多步骤表单（纯 JavaScript）？

Question

我正在使用互联网上的一些代码来尝试创建一个模拟遛狗约会安排应用程序。到目前为止，我的多步骤表单可以正常工作，但是我一直在尝试继续开始提交处理，并意识到随着 JavaScript 中的“下一步”按钮更改为“提交”( ) innerHTML，我不确定将onSubmit()处理功能放在哪里。挑战是我不允许使用任何服务器端编程，只能使用 HTML、CSS、JS 和 jQuery。处理表单似乎很简单，但我不确定在哪里实现该onSubmit()功能。请对我宽容点，这是一个大学挑战，JS 不是我的强项，我尝试过在网上查找，但我唯一的建议是将 onSubmit 放入按钮本身，这将是显而易见的选择，但因为它是多步表单提交按钮未编码到 HTML 中。https://codepen.io/caitlinmooneyx/pen/PoGqMaGCSS    form p {    margin: 1em 0 .5em 1em;}form {    background-color: #fafafa;    padding: 1.5em;    /*margin-right: 6em;*/}input, select, textarea {    margin: 1em;    padding: .5em;    width: 45%;    font-size: 17px;    border: 1px solid #aaa;}input[type="checkbox"] {    width: auto;    margin: .5em 1em 0 1em;}input[type="date"] {    color: #aaa!important;}#locationField > input {    width: 290%!important;}input.invalid {    background-color: #ffdddd;}.tab {    display: none;}.step {    height: 15px;    width: 15px;    margin: 0 2px;    background-color: #bbbbbb;    border: none;    border-radius: 50%;    display: inline-block;    opacity: 0.5;}.step.active {    opacity: 1;    background-color: #fac123;}

Answer 1

一个解决方案可能是设置一个默认隐藏的提交按钮（在第一个选项卡上），并在转到第二个选项卡时显示（如果添加更多选项卡，则显示最后一个选项卡）。这样您就不必更改innerHTML任何元素，只需切换一个类即可。类似的东西可能看起来像：

<form id="regForm" name="regForm" action="[NEED ACTION]" class="col-sm-6">

    ...

    <div style="overflow:auto;">

        <div style="float:right;">

            <button type="button" id="prevBtn" click="nextPrev(-1)">Previous</button>

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

            <submit type="submit" class="hide" value="Submit" />

        </div>

    </div>

</form>

function showTab(n) {

    var x = document.getElementsByClassName("tab");

    x[n].style.display = "block";

    if (n == 0) {

        document.getElementById("prevBtn").style.display = "none";

    } else {

        document.getElementById("prevBtn").style.display = "inline";

    }

    if (n == (x.length - 1)) {

        document.getElementById("nextBtn").classList.add('hide');

        document.getElementById("submitBtn").classList.remove('hide');

    } else {

        document.getElementById("nextBtn").classList.remove('hide');

        document.getElementById("submitBtn").classList.add('hide');

    }

    fixStepIndicator(n)

}

为此，您需要填写action表格的属性。

在不添加额外元素的情况下执行此操作的另一种方法是更改onClick下一步/提交按钮的操作。

function showTab(n) {

    var x = document.getElementsByClassName("tab");

    var nextSubmitBtn = document.getElementById("nextBtn");

    x[n].style.display = "block";

    if (n == 0) {

        document.getElementById("prevBtn").style.display = "none";

    } else {

        document.getElementById("prevBtn").style.display = "inline";

    }

    if (n == (x.length - 1)) {

        nextSubmitBtn.textContent = "Submit";

        nextSubmitBtn.onClick = someSubmitFunc;

    } else {

        nextSubmitBtn.textContent = "Next";

        nextSubmitBtn.onClick = function () { nextPrev(1); };

    }

    fixStepIndicator(n)

}

这将允许您保留相同的 HTML 并通过 JS 处理解决方案。如果您这样做，请记住将当前属性保留onClick在“下一步”按钮上，因为这将是运行的初始函数（当您第一次单击“下一步”时）

一些提示和注意事项：

如果您仅更改元素的文本（例如从“next”到“submit”），最好使用仅更改文本的函数：

// Pure JS

element.textContnet = 'some text';

// jQuery

$element.text('some other text');

这将有助于防止可能来自innerHTML.

你说你正在使用 jQuery，但它只在所提供的 JS 代码中的一行中使用。如果这是唯一使用 jQuery 库的行，您可以轻松替换它，并且不包含该库，从而节省网站大小。

// jQuery way to add class (line 111)

$("#sdate").addClass("invalid");

// Pure JS equivalent 

document.getElementById('sdate').classList.add('invalid');

两者都可以完成工作（添加一个类），如果您更喜欢使用 jQuery，但如果这是您唯一使用它的地方，那么这可能是一个替代方案。