blog-example-form

by theoperatore

HTML

<form id="example-form">
  <h2>TEH Form</h2>
  <ul id="results"></ul>
  <input id="input"  type="text" placeholder="Input something!"/>
  <input id="submit" type="submit"/>
</form>

CSS

html { font-family: helvetica, sans-serif; }
input {
    font-size: 1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
    border-radius: 5pt;
    padding: 5px 10px;
}
input[type="submit"] {
    color: #fff;
    background-color: #6bad38;
    border: 0;
}

JavaScript

var form    = document.getElementById('example-form'),
    input   = document.getElementById('input'),
    results = document.getElementById('results'),
    submit  = document.getElementById('submit'),
    count = 0,
    out;

submit.value = "Add #" + (++count);

// set up event listeners
form.addEventListener('submit', function(e) {
  e.preventDefault();
  e.stopPropagation();

  var val = input.value.trim();
    
  if (val !== "") {
    out = document.createElement('li');
    out.innerHTML = val;
    results.appendChild(out);
    
    input.value = "";
    submit.value = "Add #" + (++count);
  }

  return false;
}, false);