On gists

Events, store data out of DOM (own object)

jQuery

good-practice.html Raw #

<script>
  var model = {
  first: "",
  last: "",
};

function update(key, val) {
  model[key] = val;
}

function onInput(e) {
  var input = $(e.target);
  var key = input.attr('name');
  var val = input.val().trim();
  update(key, val);
}

function onSubmit(e) {
  e.preventDefault();
  $.post('/foo', model)
    .done(onSuccess)
    .fail(onError);
}

var form = $('#myform');
form.on('input', onInput);
form.on('submit' onSubmit);

</script>

bad-practice.html Raw #

// standard way, not bad but ...
<form id="myform">
  <input name="first">
  <input name="last">
  <button>Save</button>
</form>

<script>
  $('#myform').on('submit', function (e) {
  e.preventDefault();
  var data = $(this).serialize();
  $.post('/foo', data)
    .done(onSuccess)
    .fail(onError);
});
</script>