Question

我正在尝试提交我的联系表单，使用PHP发送电子邮件中的数据，保留在index.html上并使用＆＃34打开引导模式;谢谢＆＃34;消息。

我见过的所有其他例子都可以使用AJAX。但我想通过PHP单独完成，因为我的AJAX知识不存在。有谁知道它是否可能？如果是的话，怎么样？

我只包含最后一部分，确保我返回index.html或显示表单提交中的错误

来自contact.php的

PHP。

if(!$mail->Send()){
    echo "Message could not be sent.";
    echo "Mailer Error: " . $mail->ErrorInfo;
    exit;
}
print '<meta http-equiv="refresh" content="0; url=index.html" />';
echo "<script>$('#myModal').modal('show')</script>";

HTML

<form id='contactus' action='contact.php' enctype="multipart/form-data" method='post'>
<fieldset>
<legend>Contact us</legend>
<div class='container'>  
    <label for='email' >Name*:</label><br/>
    <input type="text" id="name" name="name" required /><br>
    <label for='email' >Phone*:</label><br/>
    <input type="text" id="phone" name="phone" required /><br>
    <label for='email' >Email*:</label><br/>
    <input type='text' name='email' id='email' required/><br/>
    <label for='message' >Message:</label><br/>
    <textarea rows="10" cols="50" name='message' id='message'></textarea>
        <!-- MAX_FILE_SIZE must precede the file input field -->
    <br>
    <!-- Name of input element determines name in $_FILES array -->
    Send this file: <input id="file" name="image" type="file" />
    <input type='submit' name='Submit' value='Submit' />
</div>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Thanks!</h4>
      </div>
      <div class="modal-body">
        <p>Thank you for your message!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

here：因此，如果我做对了，点击一个按钮，你想打开一个模态，列出用户输入的值，然后提交它。

为此，您首先要更改输入类型=＆＃34;提交＆＃34;输入type =＆＃34; button＆＃34;并添加data-toggle =＆＃34; modal＆＃34;数据目标=＆＃34;＃确认提交＆＃34;这样当你点击它时会触发模态：

<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />

接下来，模态对话框：

<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <div class="modal-body">
                Are you sure you want to submit the following details?

                <!-- We display the details entered by the user here -->
                <table class="table">
                    <tr>
                        <th>Last Name</th>
                        <td id="lname"></td>
                    </tr>
                    <tr>
                        <th>First Name</th>
                        <td id="fname"></td>
                    </tr>
                </table>

            </div>

  <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <a href="#" id="submit" class="btn btn-success success">Submit</a>
        </div>
    </div>
</div>

最后，还有一点jQuery：

$('#submitBtn').click(function() {
     /* when the button in the form, display the entered values in the modal */
     $('#lname').html($('#lastname').val());
     $('#fname').html($('#firstname').val());
});

$('#submit').click(function(){
     /* when the submit button in the modal is clicked, submit the form */
    alert('submitting');
    $('#formfield').submit();
});

您还没有指定validateForm（）函数的功能，但基于此，您应该限制您的表单被提交。或者您可以在表单的#submitBtn按钮上运行该功能，然后在检查完验证后加载模式。 DEMO

php表单提交后打开bootstrap模式

1 个答案: