I'm trying to have my form send me an email every time the "Submit Query" button is clicked. The form is validated and brings the user to a confirmation page after the button is clicked, but I get no email.
Form code:
$(document).ready(function() {
$('#sumbit').click(function() {
$('#contactform').attr('action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio' +
$('#name').val() + '&body=' + $('#email').val() + '&body=' + $('#comments').val() + '&body=');
$('#contactform').submit();
});
});
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
</head>
<body>
<form onSubmit="MM_validateForm('name','','R','comments','','R');return document.MM_returnValue" id="contactform">
<label for="name">Full Name:
<input name="name" type="text" id="name" required="required"></label><br /><br />
<label for="email">Email:
<input name="email" type="email" id="email" required="required"></label><br /><br />
<label for="comments">Comments:
<textarea name="comments" id="comments" required></textarea></label><br /><br />
<input name="submit" type="submit" id="submit" formaction="confirmation.html" formmethod="POST" formtarget="_self" action="mailto:chinochinako#gmail.com">
</form>
<script src="js/form.js"></script>
</body>
</html>
<script>
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var contact = $("#contact").val();
$("#returnmessage").empty(); // To empty previous error/success message.
// Checking for blank fields.
if (name == '' || email == '' || contact == '') {
alert("Please Fill Required Fields");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("contact_form.php", {
name1: name,
email1: email,
message1: message,
contact1: contact
}, function(data) {
$("#returnmessage").append(data); // Append returned message to message paragraph.
if (data == "Your Query has been received, We will contact you soon.") {
$("#form")[0].reset(); // To reset form fields on success.
}
});
}
});
});
</script>
$(function() {
$('#contactform').submit(function(e) {
e.preventDefault();
$(this).attr(
'action',
'mailto:rafaeljunqueira.rs#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
console.log($(this)[0].action);
return true;
});
});
form ul {
padding: 0;
margin: 0;
}
form ul li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="text/plain" id="contactform">
<ul>
<li>
<input type="text" placeholder="Name" id="name" />
</li>
<li>
<input type="text" placeholder="Email" id="email" />
</li>
<li>
<input type="text" placeholder="Comments" id="comments" />
</li>
</ul>
<button type="submit" id="submit">Send</button>
</form>
Welcome to Stack Overlfow.
I suspect you are missing the .preventDefault() to prevent the click event from proceeding.
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
$('#contactform').attr(
'action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
$('#contactform').submit();
});
});
Mind you, if the user bypasses clicking the button, and hits Enter, this code will not execute. You may want to consider moving your verification code into the submit event in jQuery, and move this code in there too.
I noticed a potential typo: $('#sumbit').click(function() {
Did you mean: $('#submit').click(function() {
Update
According to the HTML specifications, the action field of the form should be a correctly formed HTTP URL. So ‘mailto:’ is not valid for the action field.
Also, this will not "send" the email. It will only ask the default email program to compose a message that the user can send. If you want the data submitted to be sent via SMTP, this must be done by a server-side script (ASP/ASP.NET, PHP, ColdFusion, Perl, Python...) via a form handler.
$(function() {
$('#contactform').submit(function(e) {
e.preventDefault();
$(this).attr(
'action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
console.log($(this)[0].action);
return true;
});
});
form ul {
padding: 0;
margin: 0;
}
form ul li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="text/plain" id="contactform">
<ul>
<li>
<input type="text" placeholder="Name" id="name" />
</li>
<li>
<input type="text" placeholder="Email" id="email" />
</li>
<li>
<input type="text" placeholder="Comments" id="comments" />
</li>
</ul>
<button type="submit" id="submit">Send</button>
</form>
Related
I've the below data in html.
#Html.BeginForm("LoginDetails", "Home", FormMethod.Post){
<body onload="makeCalls()" style="background-image: url('../../ImageIcons/FaceLoginBG.jpg'); background-size: cover; visibility:hidden">
<div class="captureAndCompareWindowForLogin" style="display: block; margin-left: auto;margin-right: auto;float: none;">
<div class="centerTitle">
<h3 style="color:white">Welcome</h3>
</div>
<div class="errText" id="errText" value="errText" visibility:hidden">Invalid Username and Password</div>
<form name="loginForm" id="loginForm">
#Html.Label("Username") <input type="text" id="userid" name="userid"/><br /><br />
#Html.Label("Password") <input type="password" id="pswrd" name="pswrd"/><br /><br />
<input type="button" id="btnLogin" onclick="check()" value="Login" class="btn-block">
</form>
</div>
<script type="text/javascript">
function check() {
/* the following code checkes if user is given access */
var userNameFromForm = document.getElementById("userid").value;
var passwordFromForm = document.getElementById("pswrd").value;
var lower = userNameFromForm.toLowerCase();
if (userNameFromForm === "") {
alert("please enter your username");
}
if (passwordFromForm === "") {
alert("please enter your password");
}
//Display error message, reset the form and select the userid textbox
else {
console.log(document.getElementById("loginForm"));
document.getElementById("loginForm").submit();
}
}
</script>
</body>
}
when I click the button, without blank username and password, it is giving me the appropriate alert message, but, filled username and password and hit submit is giving me the below error.
LoginHome:142 Uncaught TypeError: Cannot read property 'submit' of null.
please let me know where am I going wrong and how can I fix it.
Thanks
In your case, problem is that you wrapping form inside another form. Please use it like that:
<body onload="makeCalls()" style="background-image: url('../../ImageIcons/FaceLoginBG.jpg'); background-size: cover; visibility:hidden">
<div class="captureAndCompareWindowForLogin" style="display: block; margin-left: auto;margin-right: auto;float: none;">
<div class="centerTitle">
<h3 style="color:white">Welcome</h3>
</div>
<div class="errText" id="errText" value="errText" visibility:hidden">Invalid Username and Password</div>
#using (Html.BeginForm("LoginDetails", "Home", FormMethod.Post, new { id = "loginForm" }))
{
#Html.Label("Username") <input type="text" id="userid" name="userid" /><br /><br />
#Html.Label("Password") <input type="password" id="pswrd" name="pswrd" /><br /><br />
<input type="button" id="btnLogin" onclick="check()" value="Login" class="btn-block">
}
</div>
<script type="text/javascript">
function check() {
/* the following code checkes if user is given access */
var userNameFromForm = document.getElementById("userid").value;
var passwordFromForm = document.getElementById("pswrd").value;
var lower = userNameFromForm.toLowerCase();
if (userNameFromForm === "") {
alert("please enter your username");
}
if (passwordFromForm === "") {
alert("please enter your password");
}
//Display error message, reset the form and select the userid textbox
else {
console.log(document.getElementById("loginForm"));
document.getElementById("loginForm").submit();
}
}
</script>
</body>
Your code will submit form to Home/LoginDetails url. Your method in HomeController should be like this:
public ActionResult LoginDetails(string userid, string pswrd)
{
//do something
}
Get rid of the following:
#Html.BeginForm("LoginDetails", "Home", FormMethod.Post)
Or
You can use following instead, after deleting the 'LoginDetails' forms tag.
document.getElementById("LoginDetails").submit();
Hello I have a simple Jquery question, I have a simple jquery popup form that displays a thank you message when users have completed it. They can then close it. I am having trouble getting the box to reset and show the original form once a user closes it.
//open popup Book a demo
$(".actionButtonHeader, .bookADemoBTN").click(function(){
$("#overlay_form").fadeIn(1000);
$(".background_overlay").fadeIn(500);
positionPopup();
e.preventDefault();
});
var email = document.getElementById("email").value;
var subscribed = document.getElementById("subscribed").value
$("#overlay_form").submit(function(e)
{
var postData = $(this).serializeArray();
$.ajax(
{
url : "demoEmailProcess.php",
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
$(".formContent").html("<div id='messageDemo'><h2 style='text-align: center; font-size: 27px;'>Thank you " + (fullName.value).split(" ")[0]+ "!" + "</h2>" + "<p style='font-size: 21px;'> Your message has beeen successfully sent. We appreciate your interest in Cybertonica and will get back to you within the next 24 hours. </p>" + "<a class='messageLink' href='index.php'>Return to Homepage</a></div>")
},
error: function(jqXHR, textStatus, errorThrown)
{
}
});
e.preventDefault();
});
$("#ajaxform").submit(); //Submit the FORM
//close popup Book a demo
$(".close").click(function(){
$("#overlay_form").fadeOut(500);
$(".background_overlay").fadeOut(500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background_overlay"></div>
<form id="overlay_form" style="display:none" action="" method="post" >
<div class="close"><div class="innerClose">X</div></div>
<div class="formContent">
<b class="popupText">Want to see how we manage fraud and increase sales? We would love to hear from you. Book a demo with Cybertonica!</b>
<p class="popupText">Briefly explain your business needs and how you manage fraud and we will happily get back to you within the next 24 hours.</p>
<p id="returnmessage"></p>
<div class="popupRowOne">
<li><b>Full Name<sup>*</sup></b>
<input id="fullName" name="fullName" required type="text">
</li>
<li><b>Company Name<sup>*</sup></b>
<input required name="companyName" id="companyName" type="text"></li>
</div>
<div class="popupRowTwo">
<li><b>Email<sup>*</sup></b>
<input required name="address" id="address" type="text">
</li>
<li><b>Job Title<sup>*</sup></b>
<input required name="jobTitle" id="jobTitle" type="text">
</li>
<li id="hiddenPot"><b>Please leave this blank<sup>*</sup></b>
<input type="text" name="email" id="email">
</li>
</div>
<div class="popupRowThree">
<li><b>Your Message<sup>*</sup></b>
<input name="textMessage" id="textMessage" class="textareaPopup" required>
</li>
</div>
<div id="contactSubscribe">
<p class="checkBoxText"><input type="checkbox" id="subscribed" value="subscribed" name="subscribed" checked> I would like to sign up to Cybertonica newsletter</p>
<button type="submit" id="submit" value="Submit" class="popUpactionButton">Submit</button>
</div>
</div>
</form>
Try this:
After:
$(".background_overlay").fadeOut(500);
Add this line:
$("#overlay_form").reset();
I am trying to understand the basics of using AJAX in conjunction with PHP in order to use php pages to provide functions, but not change my 'view' on my MVC design.
So I created this basic login page...
<!DOCTYPE html>
<head>
<title>learning Php</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript">
$(document).ready(function() {
$(#"login").click(function() {
var action = $("#form1").attr("action");
var form_data = {
username: $("#username").val(),
password: $("#password").val(),
is_ajax: 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'success')
{
$("#form1").slideUp('slow', function() {
$("#message").html('<p class="success">You have logged in.</p>');
};
}
else
$("#message").html('<p class="error">Incorrect password or username.</p>');
}
});
return false;
});
});
</script>
</head>
<body>
<div>
<form name="form1" id="form1" method="post" action="loginForm.php">
<p>
<label for="username"> Username: </label>
<input type="text" id="username" name="username" />
</p>
<p>
<label for="password"> Password: </label>
<input type="text" id="username" name="username" />
</p>
<p>
<input type="submit" id="login" name="login" value="login" />
</p>
</form>
<div id="message"></div>
<div>
</body>
</html>
And this was my php page to "handle" to login...
<?php
$is_ajax = $_REQUEST['is_ajax'];
if(isset($is_ajax) && $is_ajax)
{
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];
if($username == 'demo' && $password == 'demo')
{
echo 'success';
}
}
?>
The problem I am having is that whenever I submit my login, I am redirected to "/loginForm.php" instead of staying on my current page and having the message change underneath the login form.
I tried using Firebug to help me track down what I suspected to be a javascript error, but to no avail.
Any idea on why I am being redirected or why the form is not submitting via Ajax?
One more mistake here
if(response == 'success')
{
$("#form1").slideUp('slow', function() {
}); <--- You Missed ")" here
}
a small mistake
$(#"login").click(function() {
This should be
$("#login").click(function() {
^ // # inside quotes.
Besides the typo and Rocky's good catch on the }); <--- You Missed ")" here
Both your username and password fields are the same.
<label for="username"> Username: </label>
<input type="text" id="username" name="username" />
and
<label for="password"> Password: </label>
<input type="text" id="username" name="username" />
the 2nd one should read as
<input type="text" id="password" name="password" />
In using everyone's answer, you will have yourself a working script.
Remember to hash your password once you go LIVE.
Edit sidenote: I've made a note below about using a button, rather than an input.
Here's a rewrite, just in case. However that input needs to be a <button>.
<!DOCTYPE html>
<head>
<title>learning Php</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript">
$(document).ready(function() {
$("#login").click(function() {
var action = $("#form1").attr("action");
var form_data = {
username: $("#username").val(),
password: $("#password").val(),
is_ajax: 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'success')
{
$("#form1").slideUp('slow', function() {
$("#message").html('<p class="success">You have logged in.</p>');
});
}
else
$("#message").html('<p class="error">Incorrect password or username.</p>');
}
});
return false;
});
});
</script>
</head>
<body>
<div>
<form name="form1" id="form1" method="post" action="loginForm.php">
<p>
<label for="username"> Username: </label>
<input type="text" id="username" name="username" />
</p>
<p>
<label for="password"> Password: </label>
<input type="text" id="password" name="password" />
<!--
Your original input
<input type="text" id="username" name="username" />
-->
</p>
<button type="submit" id="login" name="login" />LOGIN</button>
<!--
Your original submit input. Don't use it
<p>
<input type="submit" id="login" name="login" value="login" />
</p>
-->
</form>
<div id="message"></div>
</div>
</body>
</html>
Your last div just before </body> was unclosed </div>, I've changed that above.
Additional edit from comments.
It seems that there was probably a space inserted somewhere and the use of trim() was the final nail to the solution.
response.trim();
A special thanks goes out to Jay Blanchard to have given us a helping hand in all this, cheers Sam!
References (TRIM):
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
http://php.net/manual/en/function.trim.php
i have one form like this.
<form method="post" action="contact-post.php" id="contact_form" name="contactForm">
<div class="left_form">
<div>
<span><label>NAME</label></span>
<div id='name_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><input name="name" id="name" type="text" class="textbox"></span>
</div>
<div>
<span><label>E-MAIL</label></span>
<div id='email_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><input name="email" id="email" type="text" class="textbox" required></span>
</div>
<div>
<span><label>PHONE</label></span>
<div id='phone_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><input name="phone" id="phone" type="text" class="textbox"></span>
</div>
</div>
<div class="right_form">
<div>
<span><label>SUBJECT</label></span>
<div id='message_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><textarea name="message" id="message" required> </textarea></span>
</div>
<div id='mail_success' class='success' style="background-color:#BFD6BF;text-align:center;margin-bottom:5px;">Your message has been sent successfully.</div>
<div id='mail_fail' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Sorry, error occured this time sending your message.</div>
<div id="submit">
<span><input type="submit" id="send_message" name="submit" value="Submit" class="myButton"></span>
</div>
</div>
</form>
and i call one .js file for it is.
$(document).ready(function(){
$('#send_message').click(function(e){
//Stop form submission & check the validation
e.preventDefault();
// Variable declaration
var error = false;
var name = $('#name').val();
var email = $('#email').val();
var subject = $('#phone').val();
var message = $('#message').val();
// Form field validation
if(name.length == 0){
var error = true;
$('#name_error').fadeIn(500);
}else{
$('#name_error').fadeOut(500);
}
if(email.length == 0 || email.indexOf('#') == '-1'){
var error = true;
$('#email_error').fadeIn(500);
}else{
$('#email_error').fadeOut(500);
}
if(subject.length == 0){
var error = true;
$('#phone_error').fadeIn(500);
}else{
$('#phone_error').fadeOut(500);
}
if(message.length == 0){
var error = true;
$('#message_error').fadeIn(500);
}else{
$('#message_error').fadeOut(500);
}
// If there is no validation error, next to process the mail function
if(error == false){
// Disable submit button just after the form processed 1st time successfully.
$('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
/* Post Ajax function of jQuery to get all the data from the submission of the form as soon as the form sends the values to email.php*/
$.post("contact-post.php", $("#contact_form").serialize(),function(result){
//Check the result set from email.php file.
if(result == 'sent'){
//If the email is sent successfully, remove the submit button
$('#submit').remove();
//Display the success message
$('#mail_success').fadeIn(500);
}else{
//Display the error message
$('#mail_fail').fadeIn(500);
// Enable the submit button again
$('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
}
});
}
});
});
and one contact-post.php file is.
<?php
include('config.php');
if (isset($_POST['submit'])) {
$name=$_POST['name'];
$mail=$_POST['email'];
$phone=$_POST['phone'];
$msg=$_POST['message'];
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
test_input($name);
$query="INSERT INTO `inquiry` (id,name,contact,email,query) values ('','$name','$phone','$mail','$msg')";
$qur=mysql_query($query);
if ($qur) {
echo 'sent';
}
else {
echo 'failed';
}
}
?>
my problem is when i refresh page it's displaying like this.
i want that all message should not display before clicking submit button.please help me.
Update (adding snippet) :
.error , .success
{
display:none;
}
<form method="post" action="contact-post.php" id="contact_form" name="contactForm">
<div class="left_form">
<div>
<span><label>NAME</label></span>
<div id='name_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><input name="name" id="name" type="text" class="textbox"></span>
</div>
<div>
<span><label>E-MAIL</label></span>
<div id='email_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><input name="email" id="email" type="text" class="textbox" required></span>
</div>
<div>
<span><label>PHONE</label></span>
<div id='phone_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><input name="phone" id="phone" type="text" class="textbox"></span>
</div>
</div>
<div class="right_form">
<div>
<span><label>SUBJECT</label></span>
<div id='message_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><textarea name="message" id="message" required> </textarea></span>
</div>
<div id='mail_success' class='success' style="background-color:#BFD6BF;text-align:center;margin-bottom:5px;">Your message has been sent successfully.</div>
<div id='mail_fail' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Sorry, error occured this time sending your message.</div>
<div id="submit">
<span><input type="submit" id="send_message" name="submit" value="Submit" class="myButton"></span>
</div>
</div>
</form>
You can do one of the following :
Set the error and success classes display to none, since they will be displayed using the fadeIn function.
.error , .success
{
display:none;
}
Or
You can hide the <div>s with jQuery on load as follows :
$(document).ready(function(){
$('.error , .success').hide();
.....
});
I guess the first solution would be a better approach since the elements will not view at all since CSS loads before JS (assuming that this is the order you are loading your files with), while in the second approach the elements will be visible until jQuery loads and hides them.
Add a style as below to hide the error/success messages.
#mail_fail, #mail_success{
display : none;
}
I'm having a problem where the Ajax is not triggering the respected event.
I have two forms, one visible and one hidden.
In the visible form, the user can enter an email address.
When the user clicks the submit button of the visible form, the default submit is prevented, and through Ajax the email is validated.
If the email address is not valid, an error message will appear.
If the email address IS valid, the submit button of the hidden form should be clicked using JS (in the ajax-success function).
Here is more code for reference:
HTML
Visible Form
<form accept-charset="utf-8" id="contactForm1" style="margin-top:;" action="https://app.getresponse.com/add_contact_webform.html?u=IzDa" method="post">
<input class="wf-input wf-req wf-valid__email" type="text" name="email" data-placeholder="yes" id="email" value="Enter Your Email Here"
onfocus="if (this.value == 'Enter Your Email Here') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Enter Your Email Here';}"
style="margin-top:0px;" />
<br />
<input type="submit" class="wf-button" name="submit1" value=" " style="display:inline !important; margin-top:-10px !important;" />
</form>
Hidden Form
<form method="post" id="aweber" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl">
<div style="display:none;">
<input type="hidden" name="meta_web_form_id" value="947846900" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist3599001" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_37ecf313df3b6f27b92c34c2c00ef203" />
<input type="hidden" name="meta_adtracking" value="ibb_test" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-947846900" class="af-form"><div id="af-body-947846900" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-66127140">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-66127140" type="text" name="email" value="" />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submitaw" id="submitaw" class="submitaw" type="submit" value="Submit" tabindex="501" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display:none;"><img src="http://forms.aweber.com/form/displays.htm?id=nCzsHCxsnAwM" alt="" /></div>
</form>
JS
Ajax for visible form
$('#contactForm1').click(function(e) {
e.preventDefault();
var email = $('#email').val();
var self = this;
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'check.php',
data: {
email: email
},
success: function (data) {
if (data.status == 'success') {
self.submit();
} else {
alert('The e-mail address entered is not valid.');
}
}
});
});
So here's how the scenario would be:
User enters email address, and clicks the submit button.
Ajax-call checks whether it's a valid email.
If the email is valid, the Ajax success function of the visible form
first sets the email value of the hidden form
and then triggers the submit button of the hidden form
As said before, STEP 3 isn't working.
use complete instead success
$('#contactForm1').click(function(e) {
e.preventDefault();
var email = $('#email').val();
var self = this;
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'check.php',
data: {
email: email
},
complete: function(data) {
if (data.status == 'success') {
self.submit();
} else {
alert('The e-mail address entered is not valid.');
}
}
});
});