jQuery Ajax issue

Question

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;

    });

});

EDIT

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.

Edit2

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?

Answer 1

Have you tried to return true at the end of this script? You can also explicitly put something like $("#myform").submit() as last line

Answer 2

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <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>

Answer 3

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();