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

In form data, pass info about which button was clicked -- after confirmation modal

本文关键字：按钮 信息 之后 模式 确认 数据 表单 于单击 单击      更新时间：2023-09-26

提交按钮上的click事件触发一个确认模式。

当用户单击确认按钮时，表单将被发送，而不包含我需要的原始提交按钮数据。

简化代码:

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

如何处理这个问题?

当你发布表单时点击

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

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

相关文章：