Javascript 根据用户选择的选项，如何使用JQuery提交表单

关于这个话题，我已经研究了一些不同的问题，没有突破。我试图做的是，当用户单击

submit

按钮时，我会在屏幕上显示3个按钮，如果用户单击第三个按钮，表单就会提交。否则我将阻止表单提交

然而，我在实现这一点上遇到了困难。目前我是这样做的，从我的研究中，我看到了一个非常明显的错误，那就是在表单提交后立即调用

e.preventDefault（）

，这使表单无法提交

希望在我的代码中，您能看到我正在尝试做什么。在提交表单之前显示三个选项，并且仅当选择了第三个选项时才显示提交

HTML:

#选项框{
显示：无；
}
#选项框跨度{
背景：绿色；
颜色：白色；
显示：块；
光标：指针；
填充物：5px；
利润率：10px0；
文本对齐：居中；
最大宽度：100px；
}

方案A
方案B
备选案文C

记下上一次选择的内容，并根据该选择设置默认值：

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");
});

---

jsiddle:

记下最后一个选择是什么，并基于该选择的

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");
});

---

jsiddle:

您需要阻止提交表单开始

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

最后，您不需要取消按钮的默认操作，因为它们不应该执行任何操作

如果您想提交表单，可能需要解除submit方法的绑定或直接从DOM调用它

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

或

---

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

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

最后，您不需要取消按钮的默认操作，因为它们不应该执行任何操作

如果您想提交表单，可能需要解除submit方法的绑定或直接从DOM调用它

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

或

---

我可以想出几种方法来解决这个问题

1.删除type=“提交” 在这里，您可以不制作

，而是制作

，除非在脚本中单击事件侦听器

$（'form'）。submit（）

2.选择选项时激活按钮 这里您的提交按钮最初被禁用。您可以使用选项或脚本中的

onClick

事件调用函数，并删除按钮的disabled属性

3.在选择选项时应用表单操作url

---

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

我可以想出几种解决方案

1.删除type=“提交” 在这里，您可以不制作

，而是制作

，除非在脚本中单击事件侦听器

$（'form'）。submit（）

2.选择选项时激活按钮 这里您的提交按钮最初被禁用。您可以使用选项或脚本中的

onClick

事件调用函数，并删除按钮的disabled属性

3.在选择选项时应用表单操作url

---

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

为什么它们不是实际的按钮？因为它们不是按钮，所以您不必做任何事情来阻止表单提交。因为我很快在JSFIDLE中模拟了一些东西。您尝试过搜索google吗？网上有很多信息：/I我不会问的，我没有搜索谷歌。。。。谢谢你的建议。更改答案以支持简单的状态检查（也适用于复选框）。切换事件<代码>开和<代码>关可能是一个真正的维护/调试问题。为什么它们不是实际的按钮？因为它们不是按钮，所以您不必做任何事情来阻止表单提交。因为我很快在JSFIDLE中模拟了一些东西。您尝试过搜索google吗？网上有很多信息：/I我不会问的，我没有搜索谷歌。。。。谢谢你的建议。更改答案以支持简单的状态检查（也适用于复选框）。将事件

切换为打开

和关闭可能是一个真正的维护/调试问题。