FormPersistence.js Example

by fthompson

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Form Persistence Example</title>
        <script src='https://cdn.jsdelivr.net/gh/FThompson/[email protected]/form-persistence.min.js' type='text/javascript' defer></script>
        <script src='example.js' type='text/javascript' defer></script>
        <link href='example.css' type='text/css' rel='stylesheet'>
    </head>
    <body>
        <form id='create-post'>
            <div>
                <label for='title'>Title</label>
                <input type='text' name='title' id='title'>
            </div>
            <div>
                <label for='post-body'>Body</label>
                <textarea name='post-body' id='post-body'></textarea>
            </div>
            <div>
                <label for='tags'>Tags</label>
                <input type='text' id='tag-input'><button type='button' id='add-tag'>Add</button>
                <div id='added-tags'></div>
            </div>
            <div>
                <button type='button' id='refresh'>Refresh Page</button><input type='submit'>
            </div>
        </form>
    </body>
</html>

CSS

label {
    display: block;
}

#create-post > div {
    margin-bottom: 1rem;
}

#added-tags > span {
    display: inline-block;
    border: 1px solid gray;
    border-radius: 0.25rem;
    background-color: lightblue;
    padding: 0 0.2rem 0.1rem 0.2rem;
    margin: 0.25rem 0.25rem 0 0;
}

#added-tags > span > a {
    margin-left: 0.25rem;
    cursor: pointer;
}

#refresh {
    margin-right: 0.25rem;
}

JavaScript

let form = document.getElementById('create-post');
FormPersistence.persist(form, { valueFunctions: {
    'tag': (form, value) => createTag(value)
}});

document.getElementById('add-tag').addEventListener('click', addTag);
document.getElementById('refresh').addEventListener('click', refreshPage);

function addTag() {
    let tagsBox = document.getElementById('tag-input');
    createTag(tagsBox.value);
    tagsBox.value = '';
}

function createTag(tag) {
    let tagsDiv = document.getElementById('added-tags');
    let tagElement = document.createElement('span');
    tagElement.textContent = tag;
    tagsDiv.appendChild(tagElement);
    let removeElement = document.createElement('a');
    removeElement.textContent = '\u274c';
    removeElement.addEventListener('click', () => tagsDiv.removeChild(tagElement));
    tagElement.appendChild(removeElement);
    let tagValue = document.createElement('input');
    tagValue.setAttribute('type', 'hidden');
    tagValue.setAttribute('name', 'tag');
    tagValue.value = tag;
    tagElement.appendChild(tagValue);
}

function refreshPage() {
    window.location.reload(true);
}