Javascript 只允许三个按钮中的一个提交web表单

如果我有类似于：

<form method="post" id="customForm" action="">
    //stuff 

    <div id="copiar">
        <button class="button" href="#" id="btnAdd0">
            <span class="icon icon3">&nbsp;</span>
        </button>
        <button class="button" href="#" id="btnDel0">
            <span class="icon icon58">&nbsp;</span>
        </button>
        <button class="submeter">
            <span class="label">Send</span>
        </button>
    </div>  
    </form>

//东西
发送

以及：

$（文档）.ready（函数（）{
$（“#自定义表单”）.submit（函数（）{
var formdata=$（“#customForm”）.serializeArray（）；
$.ajax({
url:“validation.php”，
类型：“post”，
数据类型：“json”，
数据：formdata，
成功：功能（数据，数据1）{
//东西
});
返回false；
});
});

目前，三个按钮发送表单。我的想法是只允许此按钮中的提交操作：

<button class="submeter">
    <span class="label">Send</span>
</button>

发送

我已经尝试了

$（“#customForm>#copiar>button.submeter”）.submit（函数（）{

但页面已重新加载，因此无法正常工作

---

有什么想法吗？

为了防止表单的默认行为，必须使用

preventDefault（）

，如下所示：

$(document).ready(function() {
    $("#customForm").submit(function(e) {
        e.preventDefault();
        var formdata = $("#customForm").serializeArray();
        $.ajax({
            url: "validation.php",
            type: "post",
            dataType: "json",
            data: formdata,
            success: function(data, data1) {
               //stuff
        });
    });
    $("#customForm button.submeter").click(function() {
        $("#customForm").submit();
    });
});

---

为了防止表单的默认行为，必须使用

preventDefault（）

，如下所示：

$(document).ready(function() {
    $("#customForm").submit(function(e) {
        e.preventDefault();
        var formdata = $("#customForm").serializeArray();
        $.ajax({
            url: "validation.php",
            type: "post",
            dataType: "json",
            data: formdata,
            success: function(data, data1) {
               //stuff
        });
    });
    $("#customForm button.submeter").click(function() {
        $("#customForm").submit();
    });
});

---

带有

href

属性的前两个按钮元素的确切用途是什么？我怀疑您使用按钮而不是常规链接只是出于格式/视觉原因

无论如何，出于您的目的，只需将属性type=“submit”添加到最后一个按钮，并删除为该按钮定义的提交处理程序，就可以了

---

编辑。您还需要调用preventDefault（）方法来停止页面重新加载，正如phil klein所指出的那样，

href

属性的前两个按钮元素的确切用途是什么？我怀疑您使用按钮而不是常规链接只是出于格式/视觉原因

无论如何，出于您的目的，只需将属性type=“submit”添加到最后一个按钮，并删除为该按钮定义的提交处理程序，就可以了

---

编辑。您还需要调用preventDefault（）方法来停止页面重新加载，正如phil klein所指出的那样，您必须先停止其他按钮的提交，然后再进行提交。此外，在为选择器使用ID时，实际上不需要将其与另一个ID（如#customForm>#copiar）组合

试试这个：

$(document).ready(function() {
    $("#customForm").submit(function(e) {
        e.preventDefault();
        var formdata = $("#customForm").serializeArray();
        $.ajax({
            url: "validation.php",
            type: "post",
            dataType: "json",
            data: formdata,
            success: function(data, data1) {
               //stuff
            }
        });
    });
    $("#customForm button").click(function(e) {
        var me = $(this);
        e.preventDefault();

        if(me.hasClass("submeter")) $("#customForm").submit();
    });
});

---

正如已经指出的，您不需要/想要href=“#”

您必须先停止其他按钮的提交，然后再进行提交。此外，在为选择器使用ID时，实际上不需要将其与另一个ID（如#customForm>#copiar）相结合

试试这个：

$(document).ready(function() {
    $("#customForm").submit(function(e) {
        e.preventDefault();
        var formdata = $("#customForm").serializeArray();
        $.ajax({
            url: "validation.php",
            type: "post",
            dataType: "json",
            data: formdata,
            success: function(data, data1) {
               //stuff
            }
        });
    });
    $("#customForm button").click(function(e) {
        var me = $(this);
        e.preventDefault();

        if(me.hasClass("submeter")) $("#customForm").submit();
    });
});

---

正如已经指出的，您不需要/想要href=“#”

我认为您仍然需要在按钮的单击绑定中添加另一个preventDefault，您需要检查单击的按钮是否是正确的按钮。我认为您仍然需要在按钮的单击绑定中添加另一个preventDefault，您需要检查单击的按钮是否是正确的按钮。不确定这是否真的回答了问题OP问题。也许我遗漏了一些东西。也许你可以为你提出的解决方案发布代码？不确定这是否真的回答了OP问题。也许我遗漏了一些东西。也许你可以为你提出的解决方案发布代码？