如何使用php echo功能打印模態窗體（彈出窗口）？

Question

好吧，我有下一個問題。當提交表單時，我有兩個回顯函數。第一個回顯功能的打印彈出窗口顯示「您的留言已發送」，另一個爲「錯誤，請重新填寫表格」。 該彈出窗口（或模態，hovever）需要在該回聲函數上激活，當窗體提交時，該彈出窗口打開時，我有代碼，但我需要彈出窗口在屏幕上「打印」回顯函數，後表格已提交。任何人？謝謝兄弟們。

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