如何使用php echo功能打印模式形式（弹出窗口）？

Question

好吧，我有下一个问题。 提交表单时，我有两个回显功能。 第一个回显功能打印弹出窗口，其文本为“您的消息已发送”，另一个为“错误。请再次填写表格”。 需要在该回显函数上激活该弹出窗口（或模态窗口，模态控件） ，当表单提交时打开该弹出窗口时，我具有代码，但是在窗体被打开后，我需要将该弹出窗口在回显函数中“打印”在屏幕上已提交。 任何人？ 谢谢兄弟们。

PHP：

// If everything is OK...
      if( !empty($name) && !empty($email) && !empty($message) ) {

          // ...send message:
          $from = "From: $name<$email>\r\nReturn-path: $email";
          $subject = "Message from the client.";
          mail("someone@company.gr", $subject, $message, $from);

              echo '
              <!-- Message about success -->
              <script type="text/javascript">

                  $(document).ready(function(){msg_sent()}});

              </script>
              <!-- End -->';

HTML：

<!-- HTML form -->
<form action="index.php" method="post" enctype="multipart/form-data" id="form">
<input type="text" name="name" class="ime" placeholder="Unesite Vaše ime" maxlength="25"       value="<?php if(isset($_POST['name'])) echo $_POST['name']; ?>" />
  <input type="text" name="email" class="email_a" placeholder="Unesite Vaš email" maxlength="35" value="<?php
  if(isset($_POST['email'])) echo $_POST['email']; ?>" />
  <textarea name="message" class="poruka" placeholder="Vaša poruka..." value="<?php if(isset($_POST['message'])) echo $_POST['message'] ?>"></textarea>
  <input type="submit" name="submit" class="posalji" value="Pošalji" />
  </form>
  <!-- The end -->

<div id="alertBox">
        <p class="title">Congrats!</p>
        <p class="txt">Your message has been sent.</p>
        <p class="ok">OK</p>
</div>

CSS：

/* Popup */
#meni #alertBox {
    position: absolute;
    top: 200%;
    left: 50%;
    width: 400px;
    height: 200px;
    margin-left: -200px;
    margin-top: -200px;
    border: 3px solid #c5c5c5;
    border-radius: 2px;
    background-color: #fff;
    display: none;
    z-index: 100; }
/* Kraj */

/* Title */
#alertBox .title {
 float: left;
 margin-left: 159px;
 margin-top: 9px;
 font-family: Tahoma, Helvetica, sans-serif;
 font-size: 17px;
 color: #333;
 text-align: center; }
/* Kraj */

/* Text */
#alertBox .txt {
 float: left;
 margin-left: 117px;
 margin-top: 7px;
 font-family: Tahoma, Helvetica, sans-serif;
 font-size: 16px;
 color: #333;
 text-align: center; }
/* Kraj */

/* OK button */
#alertBox .ok {
 float: left;
 margin-left: 161px;
 margin-top: 65px;
 font-family: Tahoma, Helvetica, sans-serif;
 font-size: 16px;
 color: #fff;
 background-color: #00ccff;
 padding: 4px 13px;
 border: none;
 border-radius: 2px;
 cursor: pointer;
 opacity: 1.0;
 filter: alpha(opacity="100"); }
/* Kraj */

/* OK button (hover effect) */
#alertBox .ok:hover {
 opacity: 0.8;
 filter: alpha(opacity="80"); }

JScript：

$(document).ready(function()
{
      $('#form').submit(function(e)
       {
           e.preventDefault();
            msg_sent();
        });
    $('.ok').click(function()
      {
                          $('#alertBox').fadeOut()
       });
 });
function msg_sent()
{
    $('#alertBox').fadeIn();
}

Answer 1

以这种方式提交表单时，输出将替换当前页面。 您可能想要做的是将其作为AJAX调用提交，并将生成的文本放入警报中。

jQuery API信息在这里： http : //api.jquery.com/jQuery.post/

快速示例：

$('#form').submit(function(e) { 
    e.preventDefault();
    $.post('index.php', $("#form").serialize(), function(data, textStatus, jqXHR) {
        $('#alertBox').html(textStatus).fadeIn();
    });
});