I built a basic form with ajax validation and page redirection with PHP and jQuery. This was working fine a few days back. I have come back to it and the ajax seems to have stopped working. At the moment the ajax is just checking a test var and echoing back data. It is really bugging me as it working fine initially! Seems strange as I cannot spot anything obvious, hoping some fresh eyes can help.
The ajax has stopped sending data across so I click submit and the ajax sends nothing so my if() does not do anything! I get the form values fine. Tried with basic ajax and alerts, something strange seems to be happening.
Hope you can help
<form id="registerform">
<ul id="form">
<li>
<label for="email">Email:</label><span class="fieldbox"><input type="text" id="email"/></span>
</li>
<li>
<label for="confirmemail">Confirm Email:</label><span class="fieldbox"><input type="text" id="confirmemail"/></span>
</li>
<li>
<label for="password">Password:</label> <span class="fieldbox"> <input type="password" id="password"/></span>
</li>
<li>
<label for="confirmpassword">Confirm Password:</label> <span class="fieldbox"> <input type="confirmpassword" id="confirmpassword"/></span>
</li>
<input type="submit" id="register" value="Sign me up!"/>
</ul>
</form>
<div id="errorbox"></div>
jQuery:
$(document).ready(function(){
$("#register").click(function(){
var formvalues = [$("#email").val(), $("#confirmemail").val(), $("#password").val(), $("#confirmpassword").val() ];
var checklength = formvalues[2].length;
if(formvalues[0] == "" || formvalues[1] == ""){
$('#errorbox').fadeIn('slow');
$("#errorbox").html('<p class="errormsg">Please complete email fields.</p><div class="errormsgshodow"></div>');
$("#main").shake(3, 5, 600);
return false;//stop click function
}
if(formvalues[2] == "" || formvalues[3] == ""){
$('#errorbox').fadeIn('slow');
$("#errorbox").html('<p class="errormsg">Please complete password fields.</p><div class="errormsgshodow"></div>');
$("#main").shake(3, 5, 600);
return false;//stop click function
}
if(formvalues[0] != formvalues[1]){
$('#errorbox').fadeIn('slow');
$("#errorbox").html('<p class="errormsg">Password field do not match</p><div class="errormsgshodow"></div>');
$("#main").shake(3, 5, 600);
return false;//stop click function
}
if(formvalues[2] != formvalues[3]){
$('#errorbox').fadeIn('slow');
$("#errorbox").html('<p class="errormsg">Password field do not match</p><div class="errormsgshodow"></div>');
$("#main").shake(3, 5, 600);
return false;//stop click function
}
if(checklength < 6 || checklength > 6){
$('#errorbox').fadeIn('slow');
$("#errorbox").html('<p class="errormsg">Password is too long.</p><div class="errormsgshodow"></div>');
$("#main").shake(3, 5, 600);
return false;//stop click function
}
var datastring = 'email=' + formvalues[1] + '&password=' + formvalues[3];
$.ajax({
type: "POST",
url: "signup.php",
data: datastring,
success: function(data){
//see redirect script for stuff here
if(data != "error"){
window.location="http://localhost/creativetree/projectboard.php?id="+data;
}else{
$('#errorbox').fadeIn('slow');
$("#errorbox").html('<p class="errormsg">User account already exists with that email.</p><div class="errormsgshodow"></div>');;
}
}
});
});
});//jquery end
//shake functions by Amit Dhamu
jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) {
this.each(function() {
$(this).css({position:"relative"});
for (var x=1; x<=intShakes; x++) {
$(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
.animate({left:intDistance}, ((intDuration/intShakes)/2))
.animate({left:0}, (((intDuration/intShakes)/4)));
}
});
return this;
};
And minimal PHP for result:
<?php
if(isset($_POST['email'])){
$email = $_POST['email'];
$password = $_POST['password'];
if($email == "test"){
echo $email;
}else{
echo 'error';
}
}
?>
It's hard to tell without seeing the error you are receiving, but from what I can see, you are not returning anything from your function upon successful validation, so your form will be submitted normally as well.
ReplyDeleteYou can prevent the form from submitting by using something like:
$("#registerform").submit(function() {
return false;
});
but perhaps returning false from the submit button click handler is enough as well.