调用php文件后，如何在当前页面中打开模态？

Question

我的问题是
我有一个具有联系表单的HTML文件，如下所示：

<form method="post" action="send-email.php" name="contactform">
    <div class="row uniform">
        <div class="6u 12u$(xsmall)">
            <input type="text" name="user-name" id="demo-name" value="" placeholder="Name" />
        </div>
        <div class="6u$ 12u$(xsmall)">
            <input type="email" name="user-email" id="demo-email" value="" placeholder="Email" />
        </div>
        <div class="12u$">
            <textarea name="user-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
        </div>
        <div class="12u$">
            <ul class="actions">
                <li>
                    <input type="submit" value="Send Message" class="special" />
                </li>
                <li>
                    <input type="reset" value="Reset" />
                </li>
            </ul>
        </div>
    </div>
</form>

如代码中所示，form方法是post，发送后将转到“ send-email.php”。 一切完成后，客户端发送了表单，我想在同一页面上显示模式，并运行“ send-email.php”。 一切正确完成后，PHP文件以以下代码结尾：

header('Location: contact-form-thank-you.html');

我不想重定向到另一个html页面，我想在同一页面上显示一个模式。 我该怎么做呢？

谢谢。

Answer 1

用户ajax发送请求

在html中更改

<form id="nyform" name="contactform">   
    ...

    <li><input id="submitform" type="button" value="Send Message" class="special" /></li>

添加模态

<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Title here</h4>
       </div>
        <div class="modal-body">
            <p>Content here</p>
        </div>
        <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
            <button class="btn btn-primary" type="button" id="okay">OK</button>
        </div>
    </div>
  </div>
</div>

添加JavaScript

<script>
        function getInput()
        {
             var inputs = {};
             inputs['user-name'] = $("#demo-name").val();
             ...
             return inputs;
        }

        jQuery(document).ready( function() {
            $('#submitform').click(function(){
                //get input
                var inputs = getInput();
                $.ajax({
                   type:'GET',
                   url: "send-email.php",
                   data: inputs,
                   async: false,
                   success:function(result){
                       $('#mymodal').modal('show');
                   }
                });
            })

        });

    </script>