在表单数据中，传递有关单击了哪个按钮的信息——在确认模式之后答案

【问题标题】：In form data, pass info about which button was clicked -- after confirmation modal在表单数据中，传递有关单击了哪个按钮的信息——在确认模式之后
【发布时间】：2015-06-04 17:54:36
【问题描述】：

提交按钮上的点击事件触发确认模式。

当用户点击确认按钮时，发送的表单没有我需要的原始提交按钮数据。

简化代码：

<form action="/action" method="post">
    <!-- inputs -->
    <button type="submit" name="foo" class="with-confirmation-modal" />
</form>

<script>
$(document).on('click', '.with-confirmation-modal', function() {
    $form = $(this).closest('form');
    $modal = $('#modal');
    $modal.on('click', 'button[type=submit]', function() {
        // form is sent without the info about which button
        // was clicked prior to modal
        $form.submit();
        return false;
    });
    $modal.modal('show');
    return false;
});
</script>

有什么好的方法来解决这个问题？

【问题讨论】：

$(this).closest('form') 给出了正确的形式？？
如果您的提交按钮包含您需要的数据，请将这些数据放在隐藏的文本输入中，这样您就不需要更改提交事件，那么您就不需要单击处理程序。提交按钮值不发布
@atmd 我不想获取提交按钮的值。当您单击发布表单时，发布的数据包括按钮的名称： ...&foo=&... 。这就是我需要的。无论如何，谢谢，我确实会采取添加隐藏输入来包含它的路线，这也是我正在考虑的。
@Dreamweaver 是的。我将在问题中添加更多细节。
你有工作代码吗？我们能看到吗？（jsfiddle等）

标签： javascript jquery forms

【解决方案1】：

当您发布表单时点击

<button type="submit" name="foo" />

发布的数据包括按钮的名称：

...&foo=&...

确认弹出窗口破坏了此行为。这里我们通过在调用 $form.submit() 之前添加一个隐藏的输入来模拟它，该输入带有单击按钮的名称。

<script>
$(document).on('click', '.with-confirmation-modal', function() {
    var $clickedBtn = $(this);
    var $form = $clickedBtn.closest('form');
    $modal = $('#credit-headsup-modal');
    $modal.on('click', 'button[type=submit]', function() {
        $(this).parent('.btn-wrapper').addClass('btn-wrapper--active');
        $(this).siblings('.btn-loading').show();
        // Pass info about which btn was clicked prior to modal
        // by adding a hidden input with same name as btn
        $form.append('<input type="hidden" name="'+$clickedBtn.attr('name')+'" value="">');
        $form.submit();
        return false;
    });
    $modal.modal('show');
    return false;
</script>

如果有更好的方法，请分享。

【讨论】：