jQuery ajax form submission to php not working with response from server

Question

Note: this is a jQuery coding exercise and I am not allowed to use plugins or other modules.

I have a typical signup form. When the user completes registration and everything is valid I want to fade in a sign in element that the user can use to sign in right away.

Note: I am using the Skeleton framework

HTML:

  <div class="container">
    <form id="myForm" action="validate_signup.php" method="post">
      <div class="row">
        <div class="twelve columns">
            <h3 class="center">Sign Up</h3>
        </div>
      </div><!--end row-->
      <div class="row">
        <div class="four columns offset-by-four">
          <input class="u-full-width" type="email" placeholder="Email" id="email" name="email">
          <span class="error">Email not entered</span>
        </div>
    </div><!--end row-->
    <div class="row">
        <div class="four columns offset-by-four">
          <input class="u-full-width" type="password" placeholder="Password" id="pword" name="pword">
          <span class="error">Password not entered</span>
        </div>
      </div><!--end row-->
      <div class="row">
       <div class="four columns offset-by-four">
          <input class="u-full-width" type="text" placeholder="First Name" id="fname" name="fname">
          <span class="error">First Name not entered</span>
       </div>
    </div><!--end row-->
    <div class="row">
       <div class="four columns offset-by-four">
          <input class="u-full-width" type="text" placeholder="Last Name" id="lname" name="lname">
          <span class="error">Last Name not entered</span>
       </div>
      </div><!--end row-->
      <div class="row">
       <div class="six columns offset-by-four">
          <input class="button-primary" type="submit" value="Submit" name="signup">
       </div>
      </div><!--end row-->
    </form>
    <div class="row">
        <div class="twelve columns">
            <p id="response" class="center no-display"></p>
        </div>
    </div>
  </div><!--end container-->
    <script src="../js/jquery.js"></script>
    <script src="../js/signup.js"></script>

jQuery:

// jQuery form validation
$(document).ready(function(){

    // field mapping
    var form_fields = {
        'email' : 'email',
        'pword' : 'password',
        'fname' : 'first name',
        'lname' : 'last name'
    };

    // ajax data
    var ajaxData = {};

    // make sure form fields were entered
    $('#myForm').on('submit', function() {

        for (var field in form_fields) {
            if (!$('#' + field).val()) {
                $('#' + field).next().addClass('error_show');
            } else if ($('#' + field).val()) {
                $('#' + field).next().removeClass('error_show');
                ajaxData[field] = $('#' + field).val();
            }
        }

        // 'signup' post field to indicate to php a submission was made
        ajaxData['signup'] = 'Submit';

        // send data if it is all there
        if (Object.keys(ajaxData).length === 5) {

            $('#response').hide().empty();

            var request = $.ajax({
                url         : 'validate_signup.php',
                method      : 'POST',
                data        : ajaxData,
                dataType    : 'html'
            });

            request.done(function(response) {

                if (response === 'Sign up complete.') {
                    $('#response').html(response + "<a href='signin.php'>Sign in</a>").fadeIn();
                }

                $('#response').html(response).fadeIn();
                $("input[name=email], input[name=pword], input[name=fname], input[name=lname]").val('');
            });

            request.fail(function() {
                alert('Your request could not be processed.');
            });

        }

        return false;

    });

});

I am not going to post the php as it is a big piece of code. Just know that if all user data is valid and a successful registration is made PHP outputs, Sign up complete. That is the response.

The main line in question is:

               if (response === 'Sign up complete.') {
                    $('#response').html(response + "<a href='signin.php'>Sign in</a>").fadeIn();
                }

First I tested this condition with console.log('response was Sign up complete) in place of $('#response').html(response + "<a href='signin.php'>Sign in</a>").fadeIn(); to make sure the condition worked, which it did. But, the fading in of a signin.php link does not work. Instead I am only seeing,

Sign up complete.

Answer 1

change this line

if (response === 'Sign up complete.') {
 $('#response').html(response + "<a href='signin.php'>Sign in</a>").fadeIn();
 }
 $('#response').html(response).fadeIn();

to

if (response === 'Sign up complete.') {
     $('#response').html(response + "<a href='signin.php'>Sign in</a>").fadeIn();
     }else{
     $('#response').html(response).fadeIn();
}

Your can also change the div style to see the fadein effect. example:

<div id="response" style="display:none">

Use time parameter to see the real effect.

$('#response').html(response + "<a href='signin.php'>Sign in</a>").fadeIn(1000);