JQuery form sticks with the ajax indicator on and won't submit
Posted
by Steven Buick
on Stack Overflow
See other posts from Stack Overflow
or by Steven Buick
Published on 2010-04-26T11:35:36Z
Indexed on
2010/04/26
11:53 UTC
Read the original article
Hit count: 260
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?
© Stack Overflow or respective owner
