JQuery form sticks with the ajax indicator on and won't submit
- by Steven Buick
Hi,
I'm using JQuery 1.3 to validate and submit a form to a PHP page which JSON encodes a server response to display on the original form page.
I've tried submitting the form without the JQuery part and everything seems to work fine but when I add JQuery it doesn't submit and constantly displays the ajax indicator.
Here's my code:
$(document).ready(function(){
var options = {
target: '#messagebox',
url: 'updateregistration.php',
type:'POST',
beforeSubmit: validatePassword,
success: processJson,
dataType: 'json'
};
$("form:not(.filter) :input:visible:enabled:first").focus();
$("#webmailForm").validate({
errorLabelContainer: "#messagebox",
rules: {
forename: "required",
surname: "required",
currentpassword: "required",
directemail: {
required: true,
email: true
},
directtelephone: "required"
},
messages: {
forename: { required: "Please enter your forename" },
directemail: { required: "Please enter your direct e-mail address", email: "Your e-mail address does not appear to be valid(Example: [email protected])" },
surname: { required: "Please enter your surname" },
directtelephone: { required: "Please enter your direct telephone number" },
currentpassword: { required: "Please enter your current password" }
}
});
$('#webmailForm').submit(function() {
$('#ajaxindicator').show();
$(this).ajaxSubmit(options);
return false;
});
});
function processJson(data) {
$("#webmailForm").fadeOut("fast");
$("#messagebox").fadeIn("fast");
$("#messagebox").css({'background-image' : 'url(../images/messageboxbackgroundgreen.png)','border-color':'#009900','border-width':'1px','border-style':'solid'});
var forename=data.forename;
var surname=data.surname;
var directemail=data.directemail;
var directphone=data.directphone;
var dateofbirth=data.dateofbirth;
var companyname=data.companyname;
var fulladdress=data.fulladdress;
var telephone=data.telephone;
var fax=data.fax;
var email=data.email;
var website=data.website;
var fsanumber=data.fsanumber;
var membertype=data.membertype;
var network=data.network;
$("#messagebox").html('<h3>Registration Update successful!</h3>' + '<p><strong>Member Type:</strong> ' + membertype + '<br>' + '<strong>Forename:</strong> ' + forename + '<br><strong>Surname:</strong> ' + surname + '<br><strong>Direct E-mail:</strong> ' + directemail + '<br><strong>Direct Phone:</strong> ' + directphone + '<br><strong>Date of Birth:</strong> ' + dateofbirth + '<br><strong>Company:</strong> ' + companyname + '<br><strong>Address:</strong> ' + fulladdress + '<br><strong>Telephone:</strong> ' + telephone + '<br><strong>Fax:</strong> ' + fax + '<br><strong>E-mail:</strong> ' + email + '<br><strong>Website:</strong> ' + website + '<br><strong>FSA Number:</strong> ' + fsanumber + '<br><strong>Network:</strong> ' + network + '</p>');
$('#ajaxindicator').hide();
}
function validatePassword(){
var clientpassword=$("#clientpassword").val();
var currentpassword=$("#currentpassword").val();
var currentpasswordmd5=hex_md5(currentpassword);
if (currentpasswordmd5!=clientpassword){
$("#messagebox").html("You input the wrong current password, please try again.");
$('#ajaxindicator').hide();
return false;
}
}
I have a disabled textbox and some hidden ones. Could this be the problem?
