如何使用JQuery提交表单取决于用户选择的选项

Question

关于这个话题，我已经看了几个不同的问题而没有突破。我要做的是当用户点击submit按钮时我在屏幕上显示3个按钮，如果用户点击表单提交的第三个按钮。否则我会阻止表单提交。

但是我在实现这个方面遇到了麻烦。目前我正在这样做，从我的研究中我看到，一旦提交表单，我就会在调用e.preventDefault()时犯下非常明显的错误，这会阻止它被提交。

希望在我的代码中你会看到我正在尝试做的事情。在提交表单之前显示三个选项，如果选择了第三个选项，则仅提交。

HTML：

<form action="some_url" method="post">
    <input type="text" value="" id="fname" />
    <input type="submit" value="Submit" />
</form>
<br/>
<div id="option-box"> 
 <span id="option-a">Option A</span>
 <span id="option-b">Option B</span>
 <span id="option-c">Option C</span>
</div>

JQuery的：

$('form').submit(function (e) {
    e.preventDefault();
    $('#option-box').show();

    $('#option-a').click(function () {
        alert('option a');
        //Do something else
    });
    $('#option-b').click(function () {
        alert('option b');
        //Do something else
    });
    $('#option-c').click(function () {
        alert('option c - SUBMIT');
        $('form').submit();
    });

});

#option-box {
    display: none;
}
#option-box span {
    background:green;
    color: white;
    display: block;
    cursor: pointer;
    padding:5px;
    margin: 10px 0;
    text-align:center;
    max-width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="some_url" method="post">
    <input type="text" value="" id="fname" />
    <input type="submit" value="Submit" />
</form>
<br/>
<div id="option-box"> 
 <span id="option-a">Option A</span>
 <span id="option-b">Option B</span>
 <span id="option-c">Option C</span>
</div>

这是我当前代码的小提琴：

https://jsfiddle.net/javacadabra/rb553ttw/1/

Answer 1

您需要阻止提交表单才能开始

$('form').submit(function (e) {
    e.preventDefault(); //<-- Need this
    //... other code
});

在其他操作中添加事件处理程序也可能导致问题。提交多次，您将有更多的事件处理程序。所以你需要删除以前的事件。您可以使用off

删除它们

 $('#option-a').off("click").on("click", function () { /* other code */ });

最后，您不需要取消按钮的默认操作，因为他们不应该做任何事情。

如果您想提交表单，您可能想要取消绑定提交方法或直接从DOM调用它。

$('form').off("submit").submit();

或

$('form')[0].submit();

Answer 2

记下上次选择的内容，并根据该选择preventDefault：

var selectedOption = "";

$('form').submit(function (e) {
    $('#option-box').show();
    if (selectedOption != "option-c") {
        e.preventDefault();
    }
});

$('#option-box').on('click', 'span', function () {
    selectedOption = $(this).attr("id");
});

JSFiddle： https://jsfiddle.net/TrueBlueAussie/rb553ttw/4/

Answer 3

我可以通过几种方式考虑解决方案。

1。删除type =“submit”

除非您在单击事件监听器<button type="submit">

的脚本中指定，否则您可以将<button type="button">设为$('form').submit()而不提交表单。

2。选择选项

时激活按钮

此处您的提交按钮最初已停用。您可以使用选项或脚本中的onClick事件调用该函数，并删除按钮的disabled属性

3。在选择选项

时应用表单操作URL

与第二个选项类似，此处您将在用户使用脚本选择特定选项时设置操作URL。如果用户选择任何其他选项并单击提交，则不会执行任何操作