如何使用Javascript放置我的PHP接觸形式警報消息？

定位警告消息時發生問題（您需要填寫所有必填字段!!等）不能通過CSS來完成，因爲這些元素沒有任何位置。如何使用Javascript放置我的PHP接觸形式警報消息？

任何想法？

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 
    <meta charset="utf8" /> 

     <link rel="stylesheet" type="text/css" media="all" href="css/mainstyle.css"/> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
     <script src="js/everypage.js"></script> 

     <meta name="viewport" content="initial-scale=1" /> 
     <link rel="shortcut icon" href="IMG/tabicon/favicon.ico" > 
     <title> A band </title> 




<?php 
     $name = $_POST['name']; 
     $email = $_POST['email']; 
     $message = $_POST['message']; 
     $from = 'From: Website'; 
     $to = '[email protected]'; 
     $subject = 'Hello'; 
     $human = $_POST['human']; 

     $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 

     if ($_POST['submit']) { 
     if ($name != '' && $email != '') { 
      if ($human == '4') {     
       if (mail ($to, $subject, $body, $from)) { 
       echo '<p class="alert">Your message has been sent!</p>'; 
      } else { 
       echo '<p class="alert">Something went wrong, go back and try again!</p>'; 
      } 
     } else if ($_POST['submit'] && $human != '4') { 
      echo '<p class="alert">You answered the anti-spam question incorrectly!</p>'; 
     } 
     } else { 
      echo '<p class="alert">You need to fill in all required fields!!</p>'; 
     } 
    } 
    ?> 

    </head> 
    <body> 
    <div id="background"> 
     <div id="wrapper"> 


      <div class="navigation"> 
       <ul id="mainmenu"> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="band.html">Band</a></li> 
        <li><a href="news.html">News</a></li> 
        <li><a href="shows.html">Shows</a></li> 
        <li><a href="music.html">Music</a></li> 
        <li><a href="gallery.html">Gallery</a></li> 
        <li><a href="media.html">Media</a></li> 
        <li><a href="store.html">Store</a></li>       
       </ul> 
      </div> 
      <div class="article"> 
       <div id="logo"></div> 
       <div class="contacts"> 
         <h1> Contact, booking:</h1> 
         <p> [email protected] </p> 
         <p> Tel: +372 58 131 054</p> 
       </div>  


       <form method="post" action="contact.php"> 

        <label>Name</label> 
        <input name="name" placeholder="Type Here"> 

        <label>Email</label> 
        <input name="email" type="email" placeholder="Type Here"> 

        <label>Message</label> 
        <textarea name="message" placeholder="Type Here"></textarea> 

        <input id="submit" name="submit" type="submit" value="Submit"> 

        <label>*What is 2+2? (Anti-spam)</label> 
        <input name="human" placeholder="Type Here"> 

      </form> 

      </div>      
      </div> 

       <div class="footer contactfooter"> 
        <p class="bandmembers">content</p> 
        <p class="signature">content</p> 

         <ul id="footermenu"> 
          <li><a href="terms.html">Terms of use</a></li> 
          <li><a href="privacy.html">Privacy Policy</a></li> 
          <li><a href="contact.php">Contact</a></li> 
         </ul> 

       </div> 
      </div> 
    </div> 
</body> 
</html>

來源

2013-01-21 Laniakea

在一個不相關的字條：「佔位符=‘請在此處鍵入’」在大多數情況下 – andy

您可以通過wrap定位警報<p>標籤荷蘭國際集團的相關輸入（S）和使用position:relative（到包裝元素）的消息元素位置。

所以在您的JavaScript驗證：

確定哪一個表單元素應該是消息的位置提示。
包裹的形式的元素。
追加警惕包裝。

validationWrapper類應避免向目標元素添加填充/邊距。它應該僅僅是爲alert -classed元素的位置的起點。

下面的代碼使用jQuery JavaScript庫的：

$(formElem).wrap("<div class=\"validationWrapper\"></div>"); 
$(".validationWrapper").append("<p class=\"alert\">"+message+"</p>"); 
$(".validationWrapper .alert").css({ position: "relative", left: 0, top: "-5em"});

此外， ~~您的形式是直出容易受到垃圾郵件發送者。應該在服務器端設置 To標頭。~~ 沒關係，沒有關注者的PHP標籤。

來源

2013-01-21 09:24:42

我得到語法錯誤冗餘。我想這是因爲我不知道在哪裏放置代碼。 – Laniakea

您的回答讓我找到解決方案。謝謝。 :) – Laniakea

對於你的問題，我建議你使用jQuery進行驗證並顯示消息。這不僅可以幫助您將信息定位在您想要的位置，還可以爲您提供選擇信息的方式。 Use this Link to get a better understanfing

來源

2013-01-21 09:50:31 Roger

如何使用Javascript放置我的PHP接觸形式警報消息？

回答

相關問題