表单提交后加载模式

php javascript jquery twitter-bootstrap

2022-08-31 00:38:01

在用户提交电子邮件后，我一直在尝试加载消息确认模式一段时间，但根本无法使其正常工作。

到目前为止，我已经尝试回显整个脚本，触发脚本，更改URL中的哈希并检查它，这在网站的其他区域都有效。

将警报和回显文本等功能添加到页面上可以正常工作，但是当我使用 show 方法时，它不起作用。这让我相信我要么错误地逃避了字符，要么误解了模态的工作原理。有人能看到我搞砸的地方吗？

菲律宾比索：

<?php
if(isset($_POST["submit"])) {
        // Checking For Blank Fields..
    if($_POST["vname"]==""||$_POST["vemail"]==""||$_POST["sub"]==""||$_POST["msg"]==""){
       echo "Please fill out everything! We need to know who you are, and why you want to get in touch with us!";}
    else
        {
        // Check if the "Sender's Email" input field is filled out
        $email=$_POST['vemail'];
                // Sanitize E-mail Address
        $email =filter_var($email, FILTER_SANITIZE_EMAIL);
                // Validate E-mail Address
        $email= filter_var($email, FILTER_VALIDATE_EMAIL);
        $emailConfirmed=$_POST['vemail'];
        if (!$email){
          echo "Don't forget to include your email adress! Otherwise we can't get back to you.";
                }
                else
                {
                    $subject = $_POST['sub'];
                    $message = $_POST['msg'];
                    $headers =  'From:' . $emailConfirmed . "\r\n"; // Sender's Email
                    $headers .= 'Cc:' . $emailConfirmed . "\r\n"; // Carbon copy to Sender
                    // Message lines should not exceed 70 characters (PHP rule), so wrap it
                    $message = wordwrap($message, 70);
                    // Send Mail By PHP Mail Function
                    mail("marc.murray.92@gmail.com", $subject, $message, $headers);
                    echo "<script>$('#thankyouModal').modal('show')</script>";
                };
    }
 }
?>

模式的 HTML

<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <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">Thank you for pre-registering!</h4>
      </div>
      <div class="modal-body">
          <p>Thanks for getting in touch!</p>                     
      </div>    
    </div>
  </div>
</div>

编辑：更新的代码比初始问题更简单。

答案 1

而不是预先调用方法，让所有资产先加载，然后调用该方法。modal showmodal show

echo "<script>
         $(window).load(function(){
             $('#thankyouModal').modal('show');
         });
    </script>";

答案 2

与其回显脚本，为什么不直接检测使用javascript提交的表单，然后显示模式呢？

类似的东西

$("form").on('submit', function(){
   $('.modal').show();
})

（如果您使用的是JQuery）