I have the form below. The problem with it is that after I click the submit button nothing happens. The form just disappears. Even if I insert an alert in the form function it is not shown or if delete
if(hasError == false){
$(this).hide
};
Why is this happening?
<html><body><ul>
<li><a href="#" title="Share with a friend"><span>NOTIFY A FRIEND</span></a>
<div class="navLinks">
<form name="send-to-friend" id="form2" action="">
<label for="name" class="blockItem">Your Name</label>
<input type="text" id="name" class="blockItem" name="your name" maxlength="60" size="30"/>
<label for="emailFrom" class="blockItem">Your Email Address</label>
<input type="text" id="emailFrom" class="blockItem" name="your email" maxlength="60" size="30" />
<label for="friend-email" class="blockItem">Your friend's e-mail Address</label>
<input type="text" id="emailTo" class="blockItem" name="your friends email" maxlength="60" size="30" />
<input class="button" id="submitt2" type="submit" value="Send Message" />
<input class="button" type="submit" value="Cancel" />
</form>
</div>
</li>
</ul></body></html>
CSS:
.navLinks {
text-align: left;
color: #b9cce4;
background: #2C75D8;
padding: 0 5px;
z-index: 10000;
background: #333;
}
form {
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
line-height: 1.5em;
color: #222;
text-decoration: none;
padding: 1em;
margin-bottom: 1em;
}
label {
margin: 10px 0 0 0;
}
.blockItem {
display: block;
}
.button {
display: inline;
margin-top: 10px;
}
JavaScript:
$('.navLinks').hide();
//hide show the main nav content
$(".nav a").on("click", function(e) {
$(".navLinks").hide();
$(this).siblings(".navLinks").show();
e.preventDefault();
});
//error checking
$("#submit2").click(function(){
$(".error").hide();
var hasError = false;
var emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var nameVal = $("#name").val();
if(nameVal == '') {
$("#name").after('<span class="error">You forgot to enter the name.</span>');
hasError = true;
}
var emailToVal = $("#emailTo").val();
if(emailToVal == '') {
$("#emailTo").after('<span class="error">You forgot to enter the email address to send to.</span>');
hasError = true;
} else if(!emailReg.test(emailToVal)) {
$("#emailTo").after('<span class="error">Enter a valid email address to send to.</span>');
hasError = true;
}
var emailFromVal = $("#emailFrom").val();
if(emailFromVal == '') {
$("#emailFrom").after('<span class="error">You forgot to enter the email address to send from.</span>');
hasError = true;
} else if(!emailReg.test(emailFromVal)) {
$("#emailFrom").after('<span class="error">Enter a valid email address to send from.</span>');
hasError = true;
}
if(hasError == false){
$(this).hide();
$.ajax({
type: "POST",
url: "sendemail.php",
data: data,
success: function(){
$("#loading").fadeOut(100).hide(); $('#message-sent').fadeIn(500).show(); }
});
};
return false;
});
if I understand correctly your $.ajax function doing nothing, except hiding email form...
data: data
whats you are transfering here? where is writed that it's information from submited form?
also if you want to get some response data, you shold add it to your success function like
success: function(data){
//show it somehow
}
There are a couple of problems ...
Your HTML shows this (note the id attribute)
<input class="button" id="submitt2" type="submit" value="Send Message" />
your jQuery :
$("#submit2").click(function(){
and your listening for the click event on submit2 and the id of the button is submitt2.
I would suggest that rather than listening to the click event of the submit button you listen for the submit event of the form :
$('#form2').submit(funciton(evt) {
// your validation here
// then to prevent submission
evt.preventDefault();
}
Docs for the .submit() function here and event.preventDefault() here
You havent initialised the data parameter
data: data,
should perhaps be
data: $('#form2').serialize(),
Read the docs on .serialize() here