title: jQuery ajax form submission to php not working with response from server
body: <p>Note: this is a jQuery coding exercise and I am not allowed to use plugins or other modules.</p>
  
  <p>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.</p>
  
  <p>Note: I am using the Skeleton framework</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;div class="container"&gt;
      &lt;form id="myForm" action="validate_signup.php" method="post"&gt;
        &lt;div class="row"&gt;
          &lt;div class="twelve columns"&gt;
              &lt;h3 class="center"&gt;Sign Up&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;&lt;!--end row--&gt;
        &lt;div class="row"&gt;
          &lt;div class="four columns offset-by-four"&gt;
            &lt;input class="u-full-width" type="email" placeholder="Email" id="email" name="email"&gt;
            &lt;span class="error"&gt;Email not entered&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!--end row--&gt;
      &lt;div class="row"&gt;
          &lt;div class="four columns offset-by-four"&gt;
            &lt;input class="u-full-width" type="password" placeholder="Password" id="pword" name="pword"&gt;
            &lt;span class="error"&gt;Password not entered&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;&lt;!--end row--&gt;
        &lt;div class="row"&gt;
         &lt;div class="four columns offset-by-four"&gt;
            &lt;input class="u-full-width" type="text" placeholder="First Name" id="fname" name="fname"&gt;
            &lt;span class="error"&gt;First Name not entered&lt;/span&gt;
         &lt;/div&gt;
      &lt;/div&gt;&lt;!--end row--&gt;
      &lt;div class="row"&gt;
         &lt;div class="four columns offset-by-four"&gt;
            &lt;input class="u-full-width" type="text" placeholder="Last Name" id="lname" name="lname"&gt;
            &lt;span class="error"&gt;Last Name not entered&lt;/span&gt;
         &lt;/div&gt;
        &lt;/div&gt;&lt;!--end row--&gt;
        &lt;div class="row"&gt;
         &lt;div class="six columns offset-by-four"&gt;
            &lt;input class="button-primary" type="submit" value="Submit" name="signup"&gt;
         &lt;/div&gt;
        &lt;/div&gt;&lt;!--end row--&gt;
      &lt;/form&gt;
      &lt;div class="row"&gt;
          &lt;div class="twelve columns"&gt;
              &lt;p id="response" class="center no-display"&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;!--end container--&gt;
      &lt;script src="../js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="../js/signup.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>// 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 + "&lt;a href='signin.php'&gt;Sign in&lt;/a&gt;").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;
  
      });
  
  });
  </code></pre>
  
  <p>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, <code>Sign up complete.</code> That is the response.</p>
  
  <p>The main line in question is:</p>
  
  <pre><code>               if (response === 'Sign up complete.') {
                      $('#response').html(response + "&lt;a href='signin.php'&gt;Sign in&lt;/a&gt;").fadeIn();
                  }
  </code></pre>
  
  <p>First I tested this condition with <code>console.log('response was Sign up complete)</code> in place of <code>$('#response').html(response + "&lt;a href='signin.php'&gt;Sign in&lt;/a&gt;").fadeIn();</code> 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, </p>
  
  <blockquote>
    <p>Sign up complete.</p>
  </blockquote>