title: Using ajax to submit and display form data in JavaScript
body: <p>I have been tasked with using my skills with HTML/CSS/JavaScript/jQuery to solve a block of code according to these requirements:</p>
  
  <p>Requirements:
  - Use ajax via the add_user function to submit the user entered data.<br>
  - You can assume the service will respond with 200 status.<br>
  - Display an error in red at the top of the form when the add user service responds with success property with a value of false. Use the error property as the message.<br>
  - Display new users in the users list when the response returns a success property<br>
  - Highlight the email input when a user enters an invalid email address. Also, display the text "please enter a valid email address" in red.<br>
  NOTE: The service will not provide this validation functionality, and will accept invalid emails.</p>
  
  <pre><code>//example usage.
  addUser('john', 'smith', function(response){
      console.log('response is: ' + JSON.stringify(response)); 
  });
  
  /*
  ################################### DO NOT MODIFY BELOW THIS LINE ##########
  ############################################################################
  */
  // Add user service wrapper.
  function addUser(username, email, callback) {
      var response;
  
      if(username === "Error"){
          response = JSON.stringify({
              success: false,
              error: "Error is not acceptable username."
          });
      } else {
          response = JSON.stringify({
              success: true,
              user: {
                  username: username,
                  email: email
              }
          });   
      }
  
      $.ajax({
          url: '/echo/json/',
          type: "post",
          data: {
              json: response
          },
          success: callback
      });
  };
  </code></pre>
  
  <p>The following HTML applies:</p>
  
  <pre><code>&lt;h2&gt;Add a User:&lt;/h2&gt;
  &lt;form&gt;
      &lt;input type="text" name="username" placeholder="name"&gt;
      &lt;input type="email" name="email" placeholder="email"&gt;
      &lt;button&gt;add user&lt;/button&gt;
  &lt;/form&gt;
  &lt;h2&gt;Users:&lt;/h2&gt;
  &lt;ul id="users"&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      font-family: Helvetica, Sans, Arial;
  }
  p, ul {
      padding: 10px;
  }
  ul {
      margin: 5px;
      border: 2px dashed #999;
  }
  </code></pre>
  
  <p>OK, hopefully you're still with me. I have a strong understanding of Object-Oriented JavaScript, as well as jQuery, HTML, and CSS. However, I have very little experience with AJAX, and none with JSON syntax/application. Therefore, some aspects of this project seem very straightforward to me, and I do not believe I need assistance in figuring them out. <strong>The things I already know how to do properly include:</strong></p>
  
  <ul>
  <li>Displaying an error in red above the form (retrieving the error information is a different story)</li>
  <li>Displaying new users in the unordered list section</li>
  <li>Highlight the email input when an invalid email address is entered (using client-side validation)</li>
  </ul>
  
  <p>The issues I am having in understanding this project focus on submitting and retrieving the data that is entered in the form. It appears as though the function addUser() first defines the variable response with a 'String' data type version of an 'Object' that contains key:value pairs of 'success: boolean, error: string' or 'success: boolean, user: {username:string,email:string}' - Here is where I run into my first area of trouble...</p>
  
  <p>If the objects containing those key:value pairs are to be relied on for determining whether or not an error has occurred during validation, and to retrieve data such as error messages and strings associated with the username and email, it would make sense to keep them as actual objects, rather than 'stringified' objects. As strings, I do not know how to access the value of a property of that object. If they were objects, I could simply refer to them using dot notation and retrieve their properties' values. (i.e. sampleObj.success or sampleObj.error) It seems as though JavaScript functions such as eval() and JSON.parse() would suffice to return these strings into proper objects, but I have no idea how to implement those functions properly.</p>
  
  <p>The second major issues I am experiencing relates to the jQuery call of the .ajax() method. I have a very rudimentary understanding of how AJAX operates, but the syntax used here confuses me. I understand that the data: {json:response} is being sent to the url:'/echo/json/' using the type:'post', but I do not understand how that data can be retrieved after this has taken place. I also do not understand what the value of 'response' is referring to in that process.</p>
  
  <p>Finally, I do not understand the use of a callback function at the end of the $.ajax() statement, and how it relates to the initial call of the addUser() function as a result of clicking the form button input. I do not understand its purpose, or how it would be used syntactically.</p>
  
  <p>I understand this is a fairly complicated project, and I may be asking a lot. But I have spent many hours over several days trying to make sense of this using my own knowledge and existing online resources, but have not gotten very far despite my diligence. I hope someone can assist me in understanding this example.</p>
  
  <p><a href="http://jsfiddle.net/brianjsullivan/CNBwU/1/" rel="nofollow">A link to a live version of this project (jsfiddle.net)</a></p>
  
  <p>//EDIT// An updated link to the jsfiddle workflow, with correct jQuery selectors and additional functionality for displaying error messages / user input: <a href="http://jsfiddle.net/brianjsullivan/5vv5w/" rel="nofollow">http://jsfiddle.net/brianjsullivan/5vv5w/</a></p>