Request.JSON

sending a JSON request to the jsFiddle backend. Later on parse and display the data.

by amutsa

HTML

<h2>Add a User:</h2>
<form id="user-add" method="post">
    <fieldset>
        <input id="user-name" type="text" name="username" placeholder="name" required="required" />
        <input id="user-email" type="email" name="email" placeholder="email" required="required" />
        <button id="user-submit" type="submit">add user</button>
    </fieldset>
</form>
<h2>Users:</h2>
<ul id="users"></ul>

CSS

#user-email:invalid {
    background: red;
}

JavaScript

/*
Assignement:

HTML: Complete the HTML to have semantic and compliant markups.

JAVASCRIPT: Dynamically add a user to the users list.
- Highlight the email input when a user enters an invalid email address and display following message: "please enter a valid email address" in red.
- Use the add_user function to submit the user's data.
- If the ajax request returns an error, display the error message in red.
- Display the newly added user in the users list when the request was successful. 

BONUS:
- no jQuery
- add some CSS3 properties

*/


// START YOUR CODE HERE

var userForm = document.getElementById('user-add'),
    userName = document.getElementById('user-name'),
    userEmail = document.getElementById('user-email'),
    userList = document.getElementById('users');

userForm.addEventListener('submit', function(e) {
    e.preventDefault && e.preventDefault() || (e.returnValue = false);
    
    if(!userName.validity.valid || !userEmail.validity.valid) {
        alert('There was a problem with your entry!  Please check again.');
        return false;
    }
    
    addUser(
        userName.value,
        userEmail.value,
        function(resp) {
            if(resp.success) {
                var newUser = document.createElement('li');
                newUser.textContent =
                    resp.user.username
                    + ' | '
                    + resp.user.email;
                
                userList.appendChild(newUser);
            } else {
                alert(resp.error);
            }
        }
    );
});

// END YOUR CODE HERE




// Do not modify this function. Add user service wrapper.
function addUser(username, email, callback) {
    var response,
        success = (!!Math.round(Math.random()));
    
    if(!success){
        response = JSON.stringify({
            success: success,
            error: "Oups, something went wrong!"
        });
    } else {
        response = JSON.stringify({
            success: success,
          ...