单击 [提交，操作] 按钮时显示模式答案

【问题标题】：Show modal when [submit, action] button clicked单击 [提交，操作] 按钮时显示模式
【发布时间】：2017-08-16 08:27:22
【问题描述】：

我正在尝试使模式显示为显示付款状态：单击按钮时处于待处理状态，该表单还使用它的操作功能并使用 target="_blank" 打开一个新窗口。

我想同时打开模态窗口和新窗口。我尝试过使用 javascript、jquery，但是当我单击按钮时，它们都没有显示模式。当我在准备好的页面文档上加载模式时，它可以工作。但我不想那样。

我的代码

        <div class="modal fade" id="Loading_purchase_status" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Loading Payment Status</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-primary" role="alert">
                        <h4><i class="alert-ico fa fa-fw fa-ban"></i><strong>Loading your payment status!&thinsp;</strong></h4>
                        Current Status: Awaiting Payment...
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script>
    $(document).ready(function() {
        $('#please_wait').fadeOut(7000);
        $('.itm_purchase_content').hide(0).delay(5000).fadeIn("slow");
    });
    $('#paypal_submit').click(function () {
        $('#Loading_purchase_status').modal('show');
    });
    </script>

然后我的表单带有我想在单击时显示模式的按钮：

<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="POST" target="_blank">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="<?php echo $site_config->grabSiteSettings_manual($con, 'paypal_address'); ?>">
<input type="hidden" name="item_name" value="<?php echo $name; ?>">
<input type="hidden" name="item_number" value="<?php echo $id; ?>">
<input type="hidden" name="amount" value="<?php echo $price; ?>">
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="custom" value="username=<?php echo $username; ?>&product= <?php echo $name; ?>">
<input type="hidden" name="notify_url" value="<?php echo $site_callback; ?>">
<input type="hidden" name="return" value="<?php echo $site_return_success; ?>">
<input type="hidden" name="cancel_return" value="<?php echo $site_return_canceled; ?>">

<button type="submit" class="btn btn-danger" id="paypal_submit"
        style="vertical-align : bottom; margin-bottom: 15px; display: block; width: 40%; float:left; margin-left: 9%;">
    <i class="fa fa-paypal"></i>aypal
</button>
 <button type="submit" class="btn btn-danger"
        style="vertical-align : bottom; margin-bottom: 15px; display: block; width: 40%; float: right; margin-right: 9%;">
    <i class="fa fa-btc"></i>itcoin
</button>
</form>

我想要一个带有id="paypal_submit" 的按钮在单击时显示模态，但还需要显示带有表单操作 url 的新窗口

【问题讨论】：

你需要阻止表单发送事件
@ArtemIlchenko 你是什么意思？
e.preventDefault();
@ErrorinException 那么这会去哪里？
@Benza 当你点击按钮时浏览器发送表单数据到服务器，你需要改变这个行为

标签： javascript php jquery

【解决方案1】：

您需要像这样在document.ready() 中注册点击功能：

<script>
    $(document).ready(function() {
        $('#please_wait').fadeOut(7000);
        $('.itm_purchase_content').hide(0).delay(5000).fadeIn("slow");

        $('#paypal_submit').click(function (e) {
           e.preventDefault();
           $('#Loading_purchase_status').modal('show');
        });
    });

</script>

【讨论】：

【解决方案2】：

您需要阻止按钮单击的默认操作并手动执行提交操作。

阻止默认的prevent动作，

更改此代码

$('#paypal_submit').click(function () {
        $('#Loading_purchase_status').modal('show');
 });

到

$('#paypal_submit').click(function (e) {
        e.preventDefault();
        $('#Loading_purchase_status').modal('show');
 });

【讨论】：

你能提供小提琴或钢笔吗

【解决方案3】：

您需要阻止默认浏览器行为，即使用event.preventDefault();提交表单，

$('#paypal_submit').click(function (e) {
    e.preventDefault();

    $('#Loading_purchase_status').modal('show');
});

这将阻止表单被提交，因为模式将显示。

注意 - 在操作 DOM 之前，请确保您的事件侦听器位于 ready 事件函数中。

$(document).ready(function() {
    $('#please_wait').fadeOut(7000);
    $('.itm_purchase_content').hide(0).delay(5000).fadeIn("slow");

    $('#paypal_submit').click(function () {
        $('#Loading_purchase_status').modal('show');
    });
});

或者...

您可以将button 类型从submit 更改为button，这将改变没有event.preventDefault() 的行为。

【讨论】：