提交模式表单后显示引导弹出框

Question

我有一个表单，在远程模态窗口中。以下是索引中的模态.html：

<a data-toggle="modal"  href="contact.html" data-target="#myModal">Contact Me</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

比这里是联系中的累积形式.html：

<script>
    $('#pop').popover({content: 'Message send.'},'click');    
</script>
<form id="contactform" method="post" action="data/send_mail.php">
    <!--
    here is whole form content
    -->
    <button type="submit" value="Submit" class="btn btn-custom" data-toggle="popover" data-placement="right" id="pop">Send</button>
</form>

现在我的问题是：我需要在不单击提交按钮后显示引导弹出框，而是在表单真正发送时显示。我在浏览器中进行验证（没有php正则表达式或jQuery验证，只是在浏览器中）。我的方法是以下（从 from 收集数据并在 send_mail.php 中创建消息后）：

@mail($email_to, $email_subject, $email_message, $headers);
    /* Here should be something that will make my popover show, like: echo ('$('#pop').popover('show')');*/
sleep(2);
echo "<meta http-equiv='refresh' content="0; url=../index.html">";

但是第二个命令（在注释中不起作用）。我是 php 的新手，所以我尽量让我的解决方案尽可能简单。我希望我已经正确解释了我的问题。感谢。。。

Answer 1

与其在表单上放一个action，不如把它留空，然后使用 jquery 进行提交调用。

脚本

该脚本将能够与您的data/send_mail.php通信，并通过从具有id of name的html input中获取值，我们可以将其作为send_mail.php的参数。

<script type="text/javascript">
    $('#myButton').on('submit', function(){
            var data_value = $('#name').val();
            var data_value2 = $('#name2').val();
            var data_value3 = $('#name3').val();
            var url = 'data/send_mail.php';
        $.ajax({
                type: "GET",
            url: url,
            data:{'data_to_pass':data_value,
                           'second_data': data_value2,
                            'third_data': data_value3},
            success:function(){   
                $('#pop').popover('show'); 
            }
        });
    });
</script>

完整的网址将被data/send_mail.php?data_to_pass=data_value

.HTML

<form>
    <input id="name" type="text" placeholder="input something here" required />
    <button id="button" type="button" value="Submit" class="btn btn-custom" data-toggle="popover" data-placement="right" id="pop">Send</button>
</form>

希望这有帮助。