How to position my PHP contact form alert message using Javascript?

Question

Having issues positioning the alert message (You need to fill in all required fields!!, etc) Cannot do it through CSS because the elements don't have anywhere to take their positions from.

Any ideas?

    <!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

You can position the alert <p> tags by wrap ing the relevant input(s) and using position:relative (to the wrapper element) to position the message element.

So in your JavaScript validation:

determine which form element should be the cue for placement of the message.
Wrap the form element.
append the alert to the wrapper.

The validationWrapper class should avoid adding padding/margin to the destination elements. It should simply be a starting point for the placement of the alert -classed element.

The following code makes use of the jQuery JavaScript library:

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

Also, ~~your form is straight out vulnerable to spammers.~~ ~~The To header should be set server-side.~~ Nevermind, didn't noticer the PHP tags.

Answer 2

For your problem I suggest you to use jquery for validation and displaying the message. This will not only help you to position the message where you want , but also give you options to style your message. Use this Link to get a better understanfing

How to position my PHP contact form alert message using Javascript?

Question

2 answers

solution1
1 ACCPTED 2013-01-21 09:24:42

solution2
0 2013-01-21 09:50:31

How to position my PHP contact form alert message using Javascript?

Question

2 answers

solution1 1 ACCPTED 2013-01-21 09:24:42

solution2 0 2013-01-21 09:50:31

solution1
1 ACCPTED 2013-01-21 09:24:42

solution2
0 2013-01-21 09:50:31