revealing prototype pattern

by Roman Joseph Rimorin

HTML

<form name="form-contact" id="formContact">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_mail">
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
    </div>
    <div class="button">
        <button type="submit">Send your message</button>
    </div>
</form>

CSS

form {
  /* Just to center the form on the page */
  margin: 0 auto;
  width: 400px;
  /* To see the outline of the form */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

form div + div {
  margin-top: 1em;
}

label {
  /* To make sure that all labels have the same size and are properly aligned */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;

  /* To give the same size to all text fields */
  width: 300px;
  box-sizing: border-box;

  /* To harmonize the look & feel of text field border */
  border: 1px solid #999;
}

input:focus, textarea:focus {
  /* To give a little highlight on active elements */
  border-color: #000;
}

textarea {
  /* To properly align multiline text fields with their labels */
  vertical-align: top;

  /* To give enough room to type some text */
  height: 5em;
}

.button {
  /* To position the buttons to the same position of the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra margin represent roughly the same space as the space
     between the labels and their text fields */
  margin-left: .5em;
}

JavaScript

(function ($) {
		// extension method to serialize form to json object
    $.fn.serializeFormJSON = function () {

        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
})(jQuery);

var Contact = function(settings){
	this.form = settings.form;
}

Contact.prototype = function(){
	
  var self,
  		service = {
      	get: { },
        post: { }
      },
      bindUiAction = function(){

      	self.form.off().on("submit", function(e){ // form subtmit
        	e.preventDefault(); // prevent page refresh on submit
          var form  = $(this);
          var obj = form.serializeFormJSON(); // convert form element to json
          console.log(obj);
        });
        
      },
  		init = function(){ // object init
      	self = this; // set this class to self
      	bindUiAction(); // initialize UI bindings
  		}
  
  return {
  
  	init: init
    
  }
}();

var settings = {
	form: $("form[name='form-contact']")
};

var contact = new Contact(settings); 
contact.init();