Question

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

当用户点击确认按钮时，表格会在没有我需要的原始提交按钮数据的情况下发送。

简化代码：

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

处理这个问题的好方法是什么？

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

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

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

1 个答案: