在提交时禁用多个表单按钮并发送适当的值？答案

【问题标题】：Disabling multiple form buttons on submit, and sending appropriate value?在提交时禁用多个表单按钮并发送适当的值？
【发布时间】：2017-04-28 14:23:59
【问题描述】：

我正在使用以下代码JSFiddle：

$("form").submit(function() {
    $(':submit', this).attr('disabled', true);
    $(this).append($('<input/>').attr({
        type: 'hidden',
        name: $(':submit', this).attr('type'),
        value: $(':submit', this).attr('value')
    }));
});

<input type="submit" value="Approve" /> <input type="submit" value="Update" />

这成功禁用了提交按钮，但我正在尝试发送适当的值。单击哪个按钮无关紧要，它总是返回第一个按钮的值。我该如何解决这个问题？

我想要发生的是，当您单击“批准”时，它会发送“批准”，当您单击“更新”时，它会发送“更新”。

【问题讨论】：

请看这个帖子：enter link description here

标签： javascript jquery

【解决方案1】：

尝试绑定submit 按钮，而不是form，如下所示：

$(':submit').on('click', function(e) {
    e.preventDefault();
    $(':submit', this).attr('disabled', true);
    $("form").append($('<input/>').attr({
        type: 'hidden',
        name: $(':submit', this).attr('type'),
        value: $(':submit', this).attr('value')
    }));
    alert($(this).attr('value'));
});

检查sn-p：

$(':submit').on('click', function(e) {
    e.preventDefault();
    $(':submit', this).attr('disabled', true);
    $("form").append($('<input/>').attr({
        type: 'hidden',
        name: $(':submit', this).attr('type'),
        value: $(':submit', this).attr('value')
    }));
    alert($(this).attr('value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST">
<input type="submit" value="Approve" /> <input type="submit" value="Update" />
</form>

【讨论】：

不知道为什么，但这个解决方案实际上并没有将隐藏字段与表单的其余部分一起提交。
@mistermartin 已修复。问题出在$(this).append，我忘了把它改成$("form").append。现在它应该可以工作了。

【解决方案2】：

以下代码适用于所有情况。

JS：

$("input[type=submit]").on("click", function() {
    $(this).attr("data-clicked", true);
});

$("form").submit(function(e) {
    e.preventDefault();
    $(':submit', this).attr('disabled', true);
    $(this).append($('<input/>').attr({
        type: 'hidden',
        name: $('[data-clicked=true]').attr('type'),
        value: $('[data-clicked=true]').attr('value')
    }));
    alert($('[data-clicked=true]').attr('value'));
    $('[data-clicked=true]').removeAttr("data-clicked")
});

【讨论】：

【解决方案3】：

给类提交按钮。

HTML

    <form method="POST">
    <input class="submit-class" type="submit" value="Approve" /> 
    <input class="submit-class" type="submit" value="Update" />
    </form>

$('.submit-class').on('click',function(){
    click_val = $(this).val();
});

$("form").submit(function(e) {
    e.preventDefault();
    $(':submit', this).attr('disabled', true);
    $(this).append($('<input/>').attr({
        type: 'hidden',
        name: $(':submit', this).attr('type'),
        value: $(':submit', this).attr('value')
    }));

    alert(click_val);
});

【讨论】：