FormParser

by Sam Fereday

HTML

<form id="register">
  <h1>Register for Miss Bakers Space Cadets</h1>
  <fieldset>
    <legend>Personal details</legend>
    <div>
      <label>First Name
        <input id="given-name" name="given-name" type="text" placeholder="First name only" required autofocus>
      </label>
    </div>
    <div>
      <label>Last Name
        <input id="family-name" name="family-name" type="text" placeholder="Last name only" required autofocus>
      </label>
    </div>
    <div>
      <label>Date of Birth
        <input id="dob" name="dob" type="date" required>
      </label>
    </div>
    <div>
      <label>Email
        <input id="email" name="email" type="email" placeholder="[email protected]" required>
      </label>
    </div>
    <div>
      <label>URL
        <input id="url" name="url" type="url" placeholder="http://mysite.com">
      </label>
    </div>
    <div>
      <label>Telephone
        <input id="phone" name="phone" type="tel" placeholder="Eg. +447000 000000" required>
      </label>
    </div>
    <div>
      <label>Shoesize
        <input id="shoes" name="shoes" type="number" min="5" max="18" step="0.5" value="9">
      </label>
    </div>
    <div>
      <label>Flying Skill level (1 low - 100 high)
        <input id="skill" name="skill" type="range" min="1" max="100" value="0">
        <output name="output" onforminput="value=a.value">0</output>
      </label>
    </div>
  </fieldset>
  <fieldset>
    <legend>Billing address</legend>
    <div>
      <label>Address
        <textarea id="address" name="address" rows=5 required></textarea>
      </label>
    </div>
    <div>
      <label>Post code
        <input id="postCode" name="postCode" type="text" required>
      </label>
    </div>
    <div>
      <label>Country
        <input id="country" name="country" list="country-names" type="text" required>
        <datalist id="country-names">
          <option label="England" value="England"></option>
          <option label="Northern Ireland"...

JavaScript

(function (window, document, userId) {

    'use strict';

    /// = Prevents double load of plugin
    var initialized = false;

    /// = Form parsing
    // Data-only for the particular element node
    var ElementModel = function (initialData) {

        this.properties = {
            "id": "",
            "pageURL": "",
            "elementName": "",
            "elementId": "",
            "elementValue": "",
            "elementType": "",
            "timesVisited": 0,
            "timesChanged": 0
        };

        this.Create(initialData);

    };

    ElementModel.prototype.Create = function (properties) {

        for (var key in properties) {
            this.properties[key] = properties[key];
        }

    };

    ElementModel.prototype.Set = function (str, val) {

        if (this.properties[str] !== 'undefined')
            this.properties[str] = val;

    };

    ElementModel.prototype.Get = function (str) {

        return this.properties[str];

    };

    // The individual element that belongs to the page
    var ElementNode = function (el, watcher, form, i) {

        var self = this;
        this.id = el.id; console.log(el.id);
        this.watcherParent = watcher;
        this.el = el;
        this.form = form;
        this.triggerNode = watcher.keyNode === el.id;

        this.elementType = helpers.getElementType(el);
        this.model = {};

        this.el.addEventListener('focus', function (e) {
            self.model.Set('timesVisited', self.model.Get('timesVisited') + 1);
            self.model.Set('elementValue', self.el.value);
        });

        this.el.addEventListener('change', function (e) {
            self.model.Set('timesChanged', self.model.Get('timesChanged') + 1);
            self.model.Set('elementValue', self.el.value);
            self.OnUpdated(e);
        });

        this.el.addEventListener('blur', function (e) {
            self.model.Set('elementValue', self.el.value);
            self.OnUpdated(e);
       ...