I am trying to repair a simple form which should be sending a simple email
I receive no javascript errors, but the ajax request is not fired. I seached a lot of answers here and in google, but none was helping my case.
Here the form html code
<form method="post" id="signupform">
<input type="text" name="name" id="name" placeholder="Nimi"><br>
<input type="email" name="email" id="email" placeholder="sähköposti@osoite.com"><br>
<p><a href="#" id="send"><b>Ilmoittaudu</b></a></p>
</form>
<div id="response"></div>
And this is the jquery validation and sending code:
<script>
/* <![CDATA[ */
$(document).ready(function(){
$("#countdown").countdown({
date: "13 october 2013 12:00:00", <!--set website launch date and time here-->
format: "on"
},
function() {
// callback function
});
var left = $('.newsletter').offset().left;
$("#subscribe").click(function(event){
$(".newsletter").show().animate({ left : left }, { duration: 1000 });
event.preventDefault();
return false;
});
$(".close1").click(function(event){
$(".newsletter").animate({ left : "110%" }, { duration: 1000 });
event.preventDefault();
return false;
});
$("#send").click(function(event){
event.preventDefault();
var cname = $("#signupform").find("#name").val();
var cemail = $("#signupform").find("#email").val();
var errcount=0;
if(cname.length < 1) {
$(this).parent().find("#name").addClass("error");
errcount = 1;
} else
$(this).parent().find("#name").removeClass("error");
var emailRegex = new RegExp(/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i);
var valid = emailRegex.test(cemail);
if (!valid) {
$(this).parent().find("#email").addClass("error");
errcount = 1;
} else
$(this).parent().find("#email").removeClass("error");
if (errcount === 0 ) {
alert('noerror');
//form submitted succesfully
$.ajax ({
type: "POST",
url: 'send.php',
data: {
name: cname,
email: cemail
},
processData: false,
async: false,
success: function(response) {
alert('success');
if (response == 'Kaavake ei ole täytetty oikein') {
$('#response').html(response);
} else {
$('#response').html(response);
$('#response').fadeIn('slow');
}
},
error: function(xhr, text, error) {
alert(text);
alert(error);
}
});
} else {
return false;
}
});
$("a[data-rel^='prettyPhoto']").prettyPhoto({deeplinking:false});
$(window).resize(function(){
var height=$('.activeslide').height();
var sidebarheight=$('.sidebar').height();
$('.sidebar').css('min-height',height);
});
$(window).resize();
});
/* ]]> */
</script>
The alert with noerrors is shown, but not the alert with success, and I cannot see the ajax activity in the network of chrome dev-tools.
Here the code from send.php
<?php
$subject = "Uusi ilmoittautuminen";
$error = 0;
$sendto = 'email@yahoo.com';
print_r($_POST);
if (!empty($_POST)) {
//validate and strip user data
if (!empty($_POST['name'])) {
$name = htmlspecialchars(strip_tags($_POST['name']));
} else {
$error = 1;
}
if (!empty($_POST['email'])) {
$email = htmlspecialchars(strip_tags($_POST['email']));
} else {
$error = 1;
}
if ($error == 0) {
//SENDING SECTION
//prepare body
$namesender = 'Yhteydenotto';
$header = "MIME-Version: 1.0" . "\r\n".
"Content-type: text/plain; charset=utf-8" . "\r\n".
"From:Yhteydenotto < noreply@mail.com >\r\n" .
"Reply-To:".$name." <".$email.">\r\n".
"X-Mailer: PHP/" . phpversion();
$body = "Uusi ilmoittautuminen\n\nNimi: ".$name."\n\nSähköposti: ".$email."";
//prepare subject
$newsubject='=?UTF-8?B?'.base64_encode($subject).'?=';
//send email
$mailresult = mail($sendto, $newsubject, $body, $header);
die("<p>Kiitos ilmoittautumisestasi!</p>");
} else {
echo 'Kaavake ei ole täytetty oikein';
die;
}
} else { echo 'no direct access allowed'; }