Databases
StackOverflow2013
Postsdbo
POHow to position my PHP contact form alert message using Javascript?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to position my PHP contact form alert message using Javascript?
    text
    copied!<p>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. </p> <p>Any ideas? </p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html lang="en-US"&gt; &lt;head&gt; &lt;meta charset="utf8" /&gt; &lt;link rel="stylesheet" type="text/css" media="all" href="css/mainstyle.css"/&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="js/everypage.js"&gt;&lt;/script&gt; &lt;meta name="viewport" content="initial-scale=1" /&gt; &lt;link rel="shortcut icon" href="IMG/tabicon/favicon.ico" &gt; &lt;title&gt; A band &lt;/title&gt; &lt;?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 != '' &amp;&amp; $email != '') { if ($human == '4') { if (mail ($to, $subject, $body, $from)) { echo '&lt;p class="alert"&gt;Your message has been sent!&lt;/p&gt;'; } else { echo '&lt;p class="alert"&gt;Something went wrong, go back and try again!&lt;/p&gt;'; } } else if ($_POST['submit'] &amp;&amp; $human != '4') { echo '&lt;p class="alert"&gt;You answered the anti-spam question incorrectly!&lt;/p&gt;'; } } else { echo '&lt;p class="alert"&gt;You need to fill in all required fields!!&lt;/p&gt;'; } } ?&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="background"&gt; &lt;div id="wrapper"&gt; &lt;div class="navigation"&gt; &lt;ul id="mainmenu"&gt; &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="band.html"&gt;Band&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="news.html"&gt;News&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="shows.html"&gt;Shows&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="music.html"&gt;Music&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="media.html"&gt;Media&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="store.html"&gt;Store&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="article"&gt; &lt;div id="logo"&gt;&lt;/div&gt; &lt;div class="contacts"&gt; &lt;h1&gt; Contact, booking:&lt;/h1&gt; &lt;p&gt; info@example.com &lt;/p&gt; &lt;p&gt; Tel: +372 58 131 054&lt;/p&gt; &lt;/div&gt; &lt;form method="post" action="contact.php"&gt; &lt;label&gt;Name&lt;/label&gt; &lt;input name="name" placeholder="Type Here"&gt; &lt;label&gt;Email&lt;/label&gt; &lt;input name="email" type="email" placeholder="Type Here"&gt; &lt;label&gt;Message&lt;/label&gt; &lt;textarea name="message" placeholder="Type Here"&gt;&lt;/textarea&gt; &lt;input id="submit" name="submit" type="submit" value="Submit"&gt; &lt;label&gt;*What is 2+2? (Anti-spam)&lt;/label&gt; &lt;input name="human" placeholder="Type Here"&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="footer contactfooter"&gt; &lt;p class="bandmembers"&gt;content&lt;/p&gt; &lt;p class="signature"&gt;content&lt;/p&gt; &lt;ul id="footermenu"&gt; &lt;li&gt;&lt;a href="terms.html"&gt;Terms of use&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="privacy.html"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload