如何使用Javascript放置我的PHP聯系人表單警報消息？

Question

定位警報消息時遇到問題（您需要填寫所有必填字段！等）無法通過CSS進行操作，因為元素沒有位置可取。

有任何想法嗎？

    <!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 = 'info@example.com'; 
        $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> info@example.com </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>

Answer 1

您可以通過wrap相關輸入並使用position:relative （到包裝器元素）來放置消息元素，從而放置警報<p>標簽。

因此，在您的JavaScript驗證中：

確定哪個表單元素應作為放置消息的提示。
包裝表單元素。
將警報附加到包裝器。

validationWrapper類應避免向目標元素添加填充/邊距。 它僅應作為放置alert分類元素的起點。

以下代碼利用了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標記。

Answer 2

對於您的問題，我建議您使用jquery進行驗證並顯示消息。 這不僅可以幫助您將消息放置在所需的位置，還可以給您提供樣式設置消息的選項。 使用此鏈接可以更好地理解

如何使用Javascript放置我的PHP聯系人表單警報消息？

問題描述

2 個解決方案

解決方案1
1 已采納 2013-01-21 09:24:42

解決方案2
0 2013-01-21 09:50:31

如何使用Javascript放置我的PHP聯系人表單警報消息？

問題描述

2 個解決方案

解決方案1 1 已采納 2013-01-21 09:24:42

解決方案2 0 2013-01-21 09:50:31

解決方案1
1 已采納 2013-01-21 09:24:42

解決方案2
0 2013-01-21 09:50:31