Question

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

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();
    });
});

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

1 个答案: