表单提交后加载模式答案

【问题标题】：Load modal after form submit表单提交后加载模式
【发布时间】：2016-03-25 13:36:45
【问题描述】：

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

到目前为止，我已经尝试过回显整个脚本、触发脚本、更改 URL 中的哈希值并进行检查，这已在网站的其他区域起作用。

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

PHP：

<?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>

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

【问题讨论】：

它甚至发送电子邮件吗？我觉得不是……
电子邮件发送，在多浏览器等中测试它工作正常。
@MarcMurray 什么不起作用？当我访问您提到的网站并在“取得联系”部分提交内容时，我确实得到了一个模式。

标签： javascript php jquery twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

为什么不使用 javascript 检测您的表单提交，然后显示模式，而不是回显脚本？

类似

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

（如果您使用的是 JQuery）

【讨论】：

我在较早的阶段尝试过，但它不起作用，我觉得它与提交表单后刷新页面有关，但我尝试的其他任何东西（回显更简单的 div，警报、控制台日志）都在工作。
使用 ajax 提交 from 并使用成功和错误回调来做你想做的事。

【解决方案3】：

我在您的示例代码中看到的第一个问题是，以下代码中不必要的 \.echo "<script> \。删除它

第二：你是否包含了 boostrap modal 所需的所有 js 和 css 文件？如果不是，请使用以下代码行更新代码

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

最后没有触发事件来打开 boostrap modal。添加以下代码以触发模态。

$(window).load(function(){
     $('#myModal').modal('show');
});

最终代码：

echo "<script>
            var newHTML = document.createElement ('div');
            newHTML.innerHTML =
            newHTML = document.createElement ('div');
            newHTML.innerHTML = ' <div id=\"myModal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\"> <div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"></div>';
            document.body.appendChild (newHTML);
            $(window).load(function(){
                 $('#myModal').modal('show');
            });
        </script>";

希望这会有所帮助。

【讨论】：

您好！这段代码的工作原理是将模态 HTML 附加到正文中，但它再次没有显示！我已经尝试更改散列并检查它是否也显示它，但 show 方法似乎在这种情况下根本不起作用。
确保在您的代码执行之前加载了所需的 js&css 库。然后你可以改进你的代码，echo "<script>$(function() { $('#thankyouModal').modal('show'); });</script>";

【解决方案4】：

我发现我认为应该由 Bootstrap 设置的 .in（将不透明度设置为 1）类在提交表单后没有显示。

$('.modal').show().addClass('in');

顺便说一句。控制台出错

$(...).parsley(...).on is not a function

【讨论】：

【解决方案5】：

也许这就是问题所在..

 echo "<script>$('#thankyouModal').modal('show')</script>";

我会这样做....

$var =   "<script>$(document).ready(function(){
             $('#thankyouModal').modal('show')
          });</script>";

然后在您的 html 模板中将其打印在您头脑中的右侧部分。

使用您的选项并在您正在回显的脚本中添加 $(document).ready 不认为会起作用...最后一个选项的问题是您将回显脚本但 jquery 可能尚未完全加载并且它认不出来。

所以，我建议它作为参数发送，然后打印出来。

如果您没有使用框架并且很难传递参数，您可以考虑 URL 并执行类似我的 project.com/result.php?submit=true 的操作

在您的前端，您将读取该变量

喜欢

if(isset($_GET["submit"]) && ($_GET["submit"]) ){
//echo your modal script 
}

【讨论】：

【解决方案6】：

正如 xkcd149 所说，如果您的意思是在同一页面中加载模式而不重新加载，您应该使用 AJAX 请求：

将表单的onsubmit属性替换为发送请求数据的函数

window.onload = function() {
  var forms = document.getElementsByTagName("form");
  for(var f in forms) {
    frm[f].onsubmit = xhr; // xhr is the function that sends the XHR
  }
}

在上面使用的提交函数中，添加成功和错误回调：

function xhr(){
  var client = new XMLHttpRequest();
  ...
  client.onerror = xhrerr;
  client.onreadystatechange = handler;
  client.send(...);
  ...
}

如果返回的 HTTP 代码是 200（或任何您想要/需要的），成功函数应该显示模式

function handler(){
  if (this.readyState == 4 && this.status == 200) {
    var widget = document.getElementById("modal-body");
    // add content to the body of the modal
  } else {
  // manage error
  }
}

【讨论】：

【解决方案7】：

$('#thankyouModal').submit(function(e) {
    e.preventDefault(); // don't submit multiple times
    this.submit(); // use the native submit method of the form element
     $('#thankyouModal').modal('show'); //Open the model
});

或您可以在表单提交后手动创建一个按钮并触发单击该按钮以打开模式。

$('#thankyouModal').click(function(e) {
        e.preventDefault(); // don't submit multiple times
        $("form").submit(); // use the native submit method of the form element
 $('<button type="button" id="btnThankYou" class="hidden" data-toggle="modal" data-target="#thankyouModal">ThankYouButton</button>').appendTo('body');

//This will click the button and open the modal
    $("#btnThankYou" ).trigger("click");
    });

【讨论】：

【解决方案8】：

将此链接放在您的 HEAD 标记处：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

然后改变这个：

<script>$('#thankyouModal').modal('show')</script>

到：

$(document).ready(function(){
<script>$('#thankyouModal').modal('show')</script>
});

【讨论】：

【解决方案9】：

$modal =   "<script>$(document).ready(function(){
         $('#thankyouModal').modal('show')
      });</script>";


if(isset($_GET["submit"]) && ($_GET["submit"]) ){
 // after running other script
 echo $modal; 
}

【讨论】：

【解决方案10】：

你可以试试

$('#thankyouModal').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
 $('#thankyouModal').modal('show'); //Open the model
});

【讨论】：

【解决方案11】：

也许您应该通过 ajax 发送表单，所以在提交事件后您不必刷新页面。

只要您不刷新页面，您的模态就会成功加载。

【讨论】：

【解决方案12】：

<?php
   if(isset($_POST["submit"])) {
    // Checking For Blank Fields..
   $checkpost = false;
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
            {
 $checkpost = true;
                $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中

<?php if($checkpost){ ?>
<script>
$('.modal').show();
</script>
<?php } ?>

【讨论】：

【解决方案13】：

我知道现在回答有点晚了。但希望它可以帮助其他人。

以下代码适用于我使用 Post-Redirect-Get 模式的情况。提交表单后打开模式。

window.onpageshow = function() {
    if (typeof window.performance != "undefined"
        && window.performance.navigation.type === 0) {
         $('#myModal').modal('show');
    }
}

【讨论】：

【解决方案14】：

写下以下代码。如果您使用的是 JQuery。

success: function(data)
    {
        $("#myModal").modal("show");
    }

【讨论】：