javascript - 仅允许三个按钮之一提交 Web 表单

Question

如果我有类似的东西:

<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>

和:

<script type="text/javascript">
    $(document).ready(function() {
        $("#customForm").submit(function() {
            var formdata = $("#customForm").serializeArray();
            $.ajax({
                url: "validation.php",
                type: "post",
                dataType: "json",
                data: formdata,
                success: function(data, data1) {
                   //stuff
            });
            return false;
        });
    });
</script>

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

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

我已经尝试过 $("#customForm > #copiar > button.submeter").submit(function() {但页面已重新加载。所以不起作用。

有什么想法吗？

Answer 1

您必须先阻止其他按钮提交，然后再进行提交。此外，当您的选择器使用 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="#"