We Keep Coding

How to get a thank you after the completion of the form?

So, I am trying to get a "thank you" message instead of a form that I have created on HTML. I want to get a thank you message only if the user has submitted all their details and everything.
Here's my HTML:
<div class = "form">
<form>
<!-- Name -->
<label class = "firstName">First name</label><br>
<input type="text" placeholder = "John" required = "required" pattern="[A-Za-z]. {1,20}" id = "firstName"><br>
<label class = "lastName">Last name</label><br>
<input type="text" placeholder = "AppleSeed" required = "required" pattern="[A-Za-z]{1,20}" id = "lastName"><br>
<!-- Email -->
<label class = "email">Email</label><br>
<input type= "email" placeholder = "j.appleseed#example.co.uk" size = "42" required = "required" id = "email"><br>
<!-- Mobile Number -->
<label class = "tel">Mobile Number</label><br>
<input placeholder = "Your Mobile Number" size = "42" required = "required" pattern="[0-9]{6,13}" id = "number"><br><br>
<!-- The Submit button -->
<button class = "submit" onclick="revealMessage()">
<span title="What are you waiting for? Click it!">Submit</span>
</button>
<h1 id = "hiddenMessage" style = "display: none">Thank You!</h1>
</form>
</div>
Javascript:
function revealMessage()
{
document.getElementById("hiddenMessage").style.display = "block";
document.getElementsByClassName("form").style.display = "none";
}

getElementsByClassName is plural. You need to add [0] to the result or better, don't use it
You want to access the submit event - just hiding the form when clicking the button, will not submit the form and also not trigger the validation
You had a bug in your pattern for the First name too
When you hide the form div, the content will hide too
You may want to use AJAX since the form removes the page when submitting - with Ajax you can return thank you from the server
Anyway this shows the thankyou before submitting when things are filled correctly. the HTML5 required and the pattern will not allow submission until correctly filled
document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault(); // pause submission
document.getElementById("hiddenMessage").style.display = "block";
document.getElementById("formDiv").style.display = "none";
setTimeout(function() {
e.target.submit()
}, 2000)
})
<div class="form" id="formDiv">
<form id="myForm">
<!-- Name -->
<label class="firstName">First name</label><br>
<input type="text" placeholder="John" required="required" pattern="[A-Za-z]{1,20}" id="firstName"><br>
<label class="lastName">Last name</label><br>
<input type="text" placeholder="AppleSeed" required="required" pattern="[A-Za-z]{1,20}" id="lastName"><br>
<!-- Email -->
<label class="email">Email</label><br>
<input type="email" placeholder="j.appleseed#example.co.uk" size="42" required="required" id="email"><br>
<!-- Mobile Number -->
<label class="tel">Mobile Number</label><br>
<input placeholder="Your Mobile Number" size="42" required="required" pattern="[0-9]{6,13}" id="number"><br><br>
<!-- The Submit button -->
<button type="submit" class="submit">
<span title="What are you waiting for? Click it!">Submit</span>
</button>
</form>
</div>
<h1 id="hiddenMessage" style="display: none">Thank You!</h1>

Instead of:
document.getElementsByClassName("form").style.display = "none";
Use querySelector:
document.querySelector(".form").style.display = "none";
Also, move your hiddenMessage div outside of your form so it doesn't get hidden with the form on submit.
See the snippet below:
function revealMessage() {
document.getElementById("hiddenMessage").style.display = "block";
document.querySelector(".form").style.display = "none";
}
<div class="form">
<form onsubmit="revealMessage()">
<!-- Name -->
<label class="firstName">First name</label><br>
<input type="text" placeholder="John" pattern="[A-Za-z]. {1,20}" id="firstName" required><br>
<label class="lastName">Last name</label><br>
<input type="text" placeholder="AppleSeed" pattern="[A-Za-z]{1,20}" id="lastName" required><br>
<!-- Email -->
<label class="email">Email</label><br>
<input type="email" placeholder="j.appleseed#example.co.uk" size="42" id="email" required><br>
<!-- Mobile Number -->
<label class="tel">Mobile Number</label><br>
<input placeholder="Your Mobile Number" size="42" pattern="[0-9]{6,13}" id="number" required><br><br>
<!-- The Submit button -->
<button type="submit" class="submit">
<span title="What are you waiting for? Click it!">Submit</span>
</button>
</form>
</div>
<h1 id="hiddenMessage" style="display: none">Thank You!</h1>

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onsubmit
There is an event Called onsubmit on javascript when you submit you can alert or do what ever suits you
<div class="form">
<form onsubmit="myFunction()">
<!-- Name -->
<label class="firstName">First name</label><br>
<input type="text" placeholder="John" required="required" id="firstName"><br>
<label class="lastName">Last name</label><br>
<input type="text" placeholder="AppleSeed" required="required" pattern="[A-Za-z]{1,20}" id="lastName"><br>
<!-- Email -->
<label class="email">Email</label><br>
<input type="email" placeholder="j.appleseed#example.co.uk" size="42" required="required" id="email"><br>
<!-- Mobile Number -->
<label class="tel">Mobile Number</label><br>
<input placeholder="Your Mobile Number" size="42" required="required" id="number"><br><br>
<!-- The Submit button -->
<button class="submit">
<span title="What are you waiting for? Click it!">Submit</span>
</button>
</form>
</div>
<h1 id="hiddenMessage" style="display: none">Thank You!</h1>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>

Issue with JS alert

I am making a simple form that will throw an alert if a 'hidden' field is being filled but I can't see what I am missing or what syntax I have wrong:
<form method="post" action="http://www.URL/form.php?form=159" id="frmSS159" onsubmit="return CheckForm159(this);">
<input type="text" name="email" value="Email Address" onclick="this.value='';" onBlur="if(this.value=='')this.value='Email Address';" />
<div style="padding: 5px 0;" aria-hidden="true">
<input type="text" name="asdf" tabindex="-1" value="" placeholder="If content, alert error">
</div>
<input type="submit" value="Subscribe" />
</form>
function CheckForm159() {
if ($_POST['asdf'] != '') {
alert("Please type your email address instead of using a form-filler");
}
return true;
}
fiddle

Hi there is mistake in your code...
you added $_POST which is PHP syntax in JavaScript.
Your updated code...
<script>
function CheckForm159() {
var _curValue = document.getElementById('asdf').value;
if (_curValue != '') {
alert("Please type your email address instead of using a form-filler");
}
return true;
}
</script>
<form method="post" action="http://www.URL/form.php?form=159" id="frmSS159" onsubmit="return CheckForm159(this);">
<input type="text" name="email" value="Email Address" onclick="this.value='';" onBlur="if(this.value=='')this.value='Email Address';" />
<div style="padding: 5px 0;" aria-hidden="true">
<input type="text" id="asdf" name="asdf" tabindex="-1" value="" placeholder="If content, alert error">
</div>
<input type="submit" value="Subscribe" />
</form>

Just use the onChange function from JQuery. After the input is changed it will show an alert, like so.
$("input[name=asdf").change(function(){
alert("Input value changed!");
});

Send email input to popout window

I have made this code and script for my blog - it's for the contact page, and I have one problem. I would like to send the email provided to the popup windows, so that the user doesn't have to re-enter it. But can't seem to get it to work. I've added an event to the submit-button, because the code is just intended for a contact form, (it's a blogger code, and I don't have access to the script.)
HTML:
<form name="contact-form">Hvad skal jeg kalde dig?
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Skriv dit navn her ..." size="40" style="margin-top: 10px;" type="text" value="" />
<br />
<br />Hvordan svarer jeg dig? <span id="required">*</span>
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Indtast din email her ..." size="40" style="margin-top: 10px;" type="text" value="" />
<br />
<br />Hvad vil du gerne fortælle mig?<span id="required">*</span>
<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Skriv din besked til mig her ..." rows="8" style="margin-top: 10px;"></textarea>
<br />
<br />
<input type="checkbox" id="nyhedsbrev">Tilmeld dig mit nyhedsbrev</p>
<input name='uri' type='hidden' value='ThingsThatMadeMe' />
<input name='loc' type='hidden' value='en_US' />
<input class="contact-form-button contact-form-button-submit2" id="ContactForm1_contact-form-submit" size="40" type="button" value="Send din besked" onclick="myFunction()">
<br />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>
</form>
Script:
<script>
document.getElementById("ContactForm1_contact-form-submit").addEventListener("click", myFunction);
function myFunction() {
if (document.getElementById('nyhedsbrev').checked) window.open("https://feedburner.google.com/fb/a/mailverify?uri=ThingsThatMadeMe", "popupwindow", "toolbar=yes, scrollbars=yes,width=550, height=520 method=post action=https://feedburner.google.com/fb/a/mailverify?");
}
</script>
This code in general is working fine. It's just this one thing, that's bugging me.

Move your JS code before closing BODY tag i.e. before </body> or after your FORM code.
You can check working demo here: http://jsfiddle.net/7j8s0wen/2/

alert box in PHP and navigation to another page

I am using javascript to check whether username and password are not empty. If one of these is empty, javascript alert is displayed and PHP script should not work, that is username and password validation should not occur and login page should be displayed once again. Is there any simple code to do this?
Nobody need to build whole form. I have already build login form and PHP script for its validation, I just want to know is there any method or function in PHP to stop script on entering empty username/password and submitting

Try This
Php Code :
<p>
<label for="first">User Name:</label>
<input type="text" name="First Name" id="first" />
</p>
<p>
<label for="last">Password:</label>
<input type="text" name="Last Name" id="last" />
</p>
<input type="submit" name="Submit" id="button2" value="Submit" onClick="javascript:verify()"/>
JavaScript Code :
function verify() {
if (document.getElementById('first').value=="") {
alert("Please Enter Your Name");
return false;
}
else if (document.getElementById('last').value=="") {
alert("Please Enter Your Password");
return false;
}
else {
document.form.submit();
}
}
Working Model : http://jsfiddle.net/NWWL4/24/

It took me awhile to get this right. I have my form in my html index
page. On a closed question here, I read this couldn't be done.
This php works VERY well with my form.
It generates a Javascript alert for good and bad results and
links back to the index page in either instance.
If you look at the 2nd echo, you'll see where you can redirect to
another page. I just loaded same page to clear form.
If you want to see the ccs, just ask.
PHP:
<?php
if(isset($_POST['submit'])) {
$to = "admin#blahblah.com";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$subject_field = $_POST['subject'];
$message = $_POST['message'];
$body = "From: $name_field\n E-Mail: $email_field:\n Subject: $subject_field\n Message: $message\n";
}
if(empty($name_field) || empty($email_field) || empty($subject_field) || empty($message)) {
echo '<script type="text/javascript">alert("There is a problem, please check the fields");window.history.go(-1);</script>';
}
else {
if(mail($to, $subject_field, $body)) {
echo '<script type="text/javascript">alert("Message successfully sent");window.location = "https://www.blahblah.com/";</script>';
}}
exit;
?>
html:
<div class="clear"></div>
<div class="container">
<div class="row">
<div class="col-md-3">
<form role="form" action="php\mailer.php" method="post" id="form">
<div class="form-group">
<input name="name" type="text" class="form-control" id="name" placeholder="Your Name" maxlength="30">
</div>
<div class="form-group">
<input name="email" type="text" class="form-control" id="email" placeholder="Your Email" maxlength="30">
</div>
<div class="form-group">
<input name="subject" type="text" class="form-control" id="subject" placeholder="Your Subject" maxlength="40">
</div>
<div><input type="submit" name="submit" class="btn btn-primary" value="Send Message"></input></div>
</div>
<div class="col-md-9">
<div class="txtarea">
<textarea name="message" rows="10" class="form-control" id="message"></textarea>
</form>
<div class="clear"></div>
<div class="col-lg-12" style="text-align:center">
<a class="btn btn-large btn-contact-link" href="#blahblah_home">Home</a>

Php/javascript email form and validation

So I have the JavaScript code which validates the first name field, I am adding more validation once I have worked this out.
So basically if the field is not filled in, return false.
If it is return true and continue to email.php to send the email. Only problem is its not sending the email to the set address. I am confused as to where I have gone wrong.
The JavaScript is working when the field is empty, and when it has an input. Help.
PS: I have removed email address for privacy purposes.
JavaScript on contact.html:
<script>
function validateForm() {
if (document.forms['email'].fname.value == ""){
alert("First name must be filled out");
return false;
}
else{
alert("Thank you! Your message was recieved!");
return true;
}
};
</script>
Html form on contact.html
<form id="email" name="email" onsubmit="return validateForm(this)" action="email.php" method="post" >
<div id="form_fname">
<label for="fname"><img src="images/firstname.png" width="94" height="17" alt="first name" /></label>
<input type="text" name="fname" id="fname" />
</div>
<div id="form_lname">
<label for="lname"><img src="images/lastname.png" width="89" height="17" alt="last name" /></label>
<input type="text" name="lname" id="lname" />
</div>
<div id="form_email">
<label for="email"><img src="images/email.png" width="53" height="17" alt="email" /></label>
<input type="text" name="email" id="email" />
</div>
<div id="form_message">
<label for="Message"><img src="images/message.png" width="77" height="17" alt="message" /></label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
</div>
<div id="form_submit">
<input type="submit" name="submit" id="submit" value=""/>
</div>
</form>
Php in email.php
<?php
if(isset($_POST['email'])) {
// Email and subject.
$email_to = "emailaddress";
$email_subject = "Mint Makeup & Beauty Enquiry";
$fname = $_POST['fname']; // required
$lname = $_POST['lname']; // required
$message = $_POST['message']; // required
$email_from = $_POST['email']; // required
// create email content
$email_content = "From:"." ".$fname." ".$lname."\n"."Email:"." ".$email_from."\n"."Message:"." ".$message;
//mail
mail($email_to, $email_subject, $email_content);
}
//return to contact page after submit.
header("location:contact.html");
?>

In your form id="email" is conflicting with input id="email"
You can use HTML5 attributes for form validation (in HTML5 supported browsers)
http://www.the-art-of-web.com/html/html5-form-validation/#.UnDpBHMW3eU
Code
<?php
if(isset($_POST['submit'])) {
print_r($_POST);
die;
$email_to = "emailaddress";
$email_subject = "Mint Makeup & Beauty Enquiry";
$fname = $_POST['fname']; // required
$lname = $_POST['lname']; // required
$message = $_POST['message']; // required
$email_from = $_POST['email']; // required
// create email content
$email_content = "From:"." ".$fname." ".$lname."\n"."Email:"." ".$email_from."\n"."Message:"." ".$message;
mail($email_to, $email_subject, $email_content);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function validateForm() {
var error = false;
var error_string = 'Please correct the following errors:\n\n';
if (document.getElementById('fname').value == ""){
error_string += "--> First name must be filled out.\n";
error = true;
}
if (document.getElementById('lname').value == ""){
error_string += "--> Last name must be filled out.\n";
error = true;
}
if (document.getElementById('email').value == ""){
error_string += "--> Email must be filled out.\n";
error = true;
}
if(error){
alert(error_string);
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return validateForm(this)" action="" method="post" >
<div id="form_fname">
<label for="fname"><img src="images/firstname.png" width="94" height="17" alt="first name" /></label>
<input type="text" name="fname" id="fname" />
</div>
<div id="form_lname">
<label for="lname"><img src="images/lastname.png" width="89" height="17" alt="last name" /></label>
<input type="text" name="lname" id="lname" />
</div>
<div id="form_email">
<label for="email"><img src="images/email.png" width="53" height="17" alt="email" /></label>
<input type="text" name="email" id="email" />
</div>
<div id="form_message">
<label for="Message"><img src="images/message.png" width="77" height="17" alt="message" /></label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
</div>
<div id="form_submit">
<input type="submit" name="submit" id="submit" value="Submit" />
</div>
</form>
</body>
</html>
I just showed you how client side validation works and form is posting correctly.. You should always use server side validation..

Try
document.forms["email"]["fname"].value
instead
document.forms['email'].fname.value
Also you can get field this way:
document.getElementById('fname').value