Reputation: 14455
I am using jQuery to validate all of the fields on my Sign up form. Unfortunately the AJAX script at the end is not posting to the PHP file like I intended, also it is not making the necessary changes to the document as specified. When I click on submit, it clears out the error labels like it should, but seems to do nothing else.
Also, all of the error checking statements are working fine. Any ideas?
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
// Check if First Name is Blank
var firstname = $("input#firstname").val();
if (firstname == "") {
$("label#firstname_error").show();
$("input#firstname").focus();
return false;
}
// Check if Last Name is Blank
var lastname = $("input#lastname").val();
if (lastname == "") {
$("label#lastname_error").show();
$("input#lastname").focus();
return false;
}
// Check if Address is Blank
var address = $("input#address").val();
if (address == "") {
$("label#address_error").show();
$("input#address").focus();
return false;
}
// Check if City is Blank
var city = $("input#city").val();
if (city == "") {
$("label#city_error").show();
$("input#city").focus();
return false;
}
// Check if State is Blank
var state = $("select#state").val();
if (state == "") {
$("label#state_error").show();
$("select#state").focus();
return false;
}
// Check if ZIP Code is Blank
var zipcode = $("input#zipcode").val();
if (zipcode == "") {
$("label#zipcode_error").show();
$("input#zipcode").focus();
return false;
}
// Check if Phone Number is Blank
var phonenumber = $("input#phonenumber").val();
if (phonenumber == "") {
$("label#phonenumber_error").show();
$("input#phonenumber").focus();
return false;
}
// Check if Username is Blank
var username = $("input#username").val();
if (username == "") {
$("label#username_error").show();
$("input#username").focus();
return false;
}
// Check if Password is Blank
var password = $("input#password").val();
if (password == "") {
$("label#password_error").show();
$("input#password").focus();
return false;
}
// Check if Confirm Password is Blank
var confirmpassword = $("input#confirmpassword").val();
if (confirmpassword == "") {
$("label#confirmpassword_error").show();
$("input#confirmpasword").focus();
return false;
}
// Check if Passwords Match
if (password != confirmpassword) {
$("label#notmatching_error").show();
$("input#password").focus();
return false;
}
// Check if user picked valid username
var restrict = $("input#restrict").val();
if (restrict == "true") {
$("label#validuser_error").show();
$("input#username").focus();
return false;
}
var plan = $("select#plan").val();
var dataString = 'firstname='+ firstname +
'&lastname=' + lastname +
'&address=' + address +
'&city=' + city +
'&state=' + state +
'&zipcode=' + zipcode +
'&phonenumber=' + phonenumber +
'&username=' + username +
'&password=' + password +
'&plan=' + plan;
//alert(dataString); return false;
$.ajax({
type: "POST",
url: "../register_user.php",
data: dataString,
success: function() {
$('#buy_form').html("<div id='message'></div>");
$('#message').html("<b>Customer Information Logged</b>")
.append("Hello!")
.hide()
.fadeIn(1500, function() {
$('#message');
});
}
});
return false;
});
});
I entirely revamped the code to break it down and now it is running the PHP script but the variables are not being posted, even when entered manually.
var dataString = 'firstname='+ firstname +
'&lastname=' + lastname +
'&address=' + address +
'&city=' + city +
'&state=' + state +
'&zipcode=' + zipcode +
'&phonenumber=' + phonenumber +
'&username=' + username +
'&password=' + password +
'&plan=' + plan;
$.ajax({
type: "POST",
url: "register_user.php",
data: dataString,
success: function(){
alert( "Hello " );
}
});
thank you for all your help so far, almost there.
Turns out when i change success to error it returns to me, so that means there is an http error. what does this mean? the page is there becasue it is successfully posting to the database but the information is not going through?
Upvotes: -1
Views: 395
Reputation: 20367
have you tried using jQuery.post()? I think $.ajax is used best for when you need pre-/post- operations.
eg.
$.post("../register_user.php", $("#input").serialize(),
function(data){ /* etc.. */ });
to do what you want and still use the same ajax function, you can do:
$.ajax({
type: "POST",
url: "../register_user.php",
data: $('form :input').serialize(),
success: function() {
$('#buy_form').html("<div id='message'></div>");
$('#message').html("<b>Customer Information Logged</b>")
.append("Hello!")
.hide()
.fadeIn(1500, function() {
$('#message');
});
}
});
I think it's a problem with your string. I just used your code and changed the ajax option from success: to error: and it works.
Try out the following HTML file, substituting your jquery scripts and see if it works (i changed the post url to a text file called ok.txt just to return some text):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery.js" type="text/javascript">
</script>
<script src="jqueryui.js" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('form').submit(function() {
$.ajax({
type: "POST",
url: "ok.txt",
data: $('form').serialize(),
success: function(data) {
$('#buy_form').html("<div id='message'><\/div>");
$('#message').html("<b>Customer Information Logged<\/b><br/>")
.append(data)
.hide()
.fadeIn(1500, function() {
$('#message');
});
}
});
return false;
});
});
//]]>
</script>
</head>
<body>
<div id="buy_form">
<form action="javascript:void(0);">
<div>
<input name="testInput" type="text" />
<input type="submit" />
</div>
</form>
</div>
</body>
</html>
Upvotes: 1
Reputation: 78687
Can you check in firebug - console tab or net tab to see if the ajax call is actually made? Have you got this uploaded somewhere so i can test?
Wait a minute. I see your building up the data as if it was going on the querystring. But your using a post.
try
var dataString = {firstname : firstname,
lastname : lastname,
.. repeat like above
}
NB you could just use the builtin $('#formId').serialize() method. All form values will be posted and i am not sure if you have other values that you do not want in the post data.
e.g var dataString = $('#formId').serialize();
Upvotes: 0
Reputation: 37154
Have you tried to return true at the end of this script? You can also explicitly put something like $("#myform").submit() as last line
Upvotes: 1