jQuery - forms basics

by Jennifer Piccione

HTML

<ul>
    <li>Last...</li>
</ul>

<div id="newItemButton">
    <button href="#" id="showForm">new item</button>
</div>

<form id="newItemForm">
    <input type="text" id="itemDescription" placeholder="Add description..." />
    <input type="submit" id="addButton" value="add" />
</form>

JavaScript

$(function() {
   
    var newItemButton = $('#newItemButton');
    var newItemForm = $('#newItemForm');
    var textInput = $('input:text');
    
    newItemButton.show();
    newItemForm.hide();
    
    $('#showForm').on('click', function() {
        newItemButton.hide();
        newItemForm.show();
    });
    
    newItemForm.on('submit', function(e) {
       
        e.preventDefault();
        var newText = $('input:text').val();
        
        $('li:last').after('<li>' + newText + '</li>');
        
        newItemForm.hide();
        newItemButton.show();
        textInput.val('');
        
    });
    
});