Skip to content

Instantly share code, notes, and snippets.

@facugon
Last active November 24, 2016 13:21
Show Gist options
  • Save facugon/ba1d113fa7365b31cf6d2300e68bfbab to your computer and use it in GitHub Desktop.
Save facugon/ba1d113fa7365b31cf6d2300e68bfbab to your computer and use it in GitHub Desktop.
javascript form element. simple but powerfull
/**
*
* @author Facugon
* @module FormElement
*
* global jquery
*
* how to use :
*
* 1. include.
* 2. just instantiate with the element as argument
* 3. you can then set values from an object to the form
* 4. and you can get the values as an object
*
* code :
*
* var form = new FormElement( $('form') );
*
* // set the form using object key as input name
* form.set({ name:'Facugon', class:'spartan', profession:'AHOO! AHOO! AHOO!' }); // asuming there is inputs with that names
*
* // get an object with the form data. use input names as key
* var data = form.get();
*
*/
//var jQuery = require('jquery');
function FormElement (el){
this.$el = (el instanceof jQuery) ? el : $(el);
}
FormElement.prototype.get = function(){
var $el = this.$el;
var inputs = $el.find(":input");
var values = {};
inputs.each(function(){
var input = this;
if(!input.name) return;
if(input.type=='checkbox') {
if(input.value && input.value != 'on'){
values[input.name] = input.checked ? input.value : null;
} else {
values[input.name] = input.checked;
}
} else if(input.type=='radio') {
if( input.checked )
values[input.name] = input.value;
} else {
values[input.name] = $(input).val();
}
});
return values;
}
FormElement.prototype.set = function(values){
var $form = this.$el;
for(var name in values){
var value = values[name];
var $input = $form.find('[name=' + name + ']');
var input = $input[0];
if( input ){
switch( input.type ){
case 'text':
case 'textarea':
input.value = value;
break;
case 'checkbox' :
if( typeof value == "boolean" ){
input.checked = value;
} else {
input.checked = true;
}
break;
case 'radio' :
var selector = '[name=' + name + '][type=radio][value=' + String(value) + ']';
$form.find(selector).attr('checked', true);
break;
case 'select-one' :
input.value = value;
break;
case 'select-multiple' :
$input.val( value );
break;
default: break;
}
$input.trigger('change');
} else {
//console.warn('not found input named ' + name );
}
}
}
//module.exports = FormElement;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment