Home/ Questions/Q 9158757
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T13:19:29+00:00

Having issues positioning the alert message (You need to fill in all required fields!!,

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    So in your JavaScript validation:

    1. determine which form element should be the cue for placement of the message.
    2. Wrap the form element.
    3. 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.

    • 0