Skip to content

Instantly share code, notes, and snippets.

@keke1123
Created November 24, 2015 02:39
Show Gist options
  • Save keke1123/c16789167779819b9c94 to your computer and use it in GitHub Desktop.
Save keke1123/c16789167779819b9c94 to your computer and use it in GitHub Desktop.
Simple jQuery data form binder script
function print(msg) {
if (console.log) {
console.log(msg);
return;
}
alert(msg);
}
var FormBinder = function (id, submitFunction) {
if (!jQuery) {
print('jQuery not loaded');
return;
}
var InputHandler = {
Check: function (name, clickFunction) {
var $checker = $('input[name="' + name + '"]');
var checkerType = $checker.attr('type').toLowerCase();
if (checkerType !== 'radio' && checkerType !== 'checkbox') {
print(name + 'is not radio type');
return;
}
function checkFilter() {
return $checker.filter(':checked');
}
var $checked = checkFilter();
$checker.on('click change', function (evt) {
if (clickFunction) {
clickFunction();
}
$checked = checkFilter();
});
return {
get: function () {
return $checked;
},
getValue: function () {
switch (checkerType) {
case 'radio':
var result = $checked.val();
return result;
case 'checkbox':
var result = [];
$checked.each(function () {
result.push($(this).val());
});
return result;
}
},
getName: function () {
return name;
}
}
},
Select: function (name, clickFunction) {
var $checker = $('select[name="' + name + '"]');
if ($checker.get(0).tagName.toLowerCase() !== 'select') {
print(name + 'is not select-option type');
return;
}
$checker.on('click change', function (evt) {
if (clickFunction) {
clickFunction();
}
});
return {
get: function () {
return $checker;
},
getValue: function () {
return $checker.val();
},
getName: function () {
return name;
}
}
},
Text: function (type, name, clickFunction) {
var $text;
if (name === undefined || name === null) {
throw alert('type="' + type + '"\'s name is missing. please check name attribute.');
}
switch (type) {
case 'textarea':
$text = $('textarea[name="' + name + '"]');
if ($text.get(0).tagName.toLowerCase() !== 'textarea') {
print(name + 'is not text type');
return;
}
break;
case 'text':
$text = $('input[name="' + name + '"]');
if ($text.attr('type').toLowerCase() !== 'text') {
print(name + 'is not text type');
return;
}
break;
}
function value() {
var t = $.trim($text.val())
return (t !== undefined && t !== null) ? t : null;
}
if (clickFunction) {
$text.on('click', function (evt) {
clickFunction();
});
}
return {
get: function () {
return $text;
},
getValue: function () {
return value();
},
getName: function () {
return name;
}
}
}
}
var $form = $('#' + id);
var url = $form.attr('action');
var method = $form.attr('method');
var enctype = $form.attr('enctype');
if (!$form) {
$form = $('form[name="' + id + '"]');
if (!$form) {
print(id + ' is not form\'s id or name');
return;
}
}
$form.submit(function (evt) {
if (submitFunction) {
submitFunction($(this), evt);
}
});
var $inputs = $form.find('input, select, textarea');
var forms = {
checkbox: [],
radio: [],
text: [],
textarea: [],
select: []
};
function isNameExist(name) {
var result = false;
for (var i in forms) {
for (var j in forms[i]) {
if (forms[i][j].getName() === name) {
result = true;
break;
}
}
if (result) {
break;
}
}
return result;
}
$inputs.each(function (i, elem) {
var type = $(this).attr('type');
var tagName = $(this).get(0).tagName.toLowerCase();
var name = $(this).attr('name');
if (!isNameExist(name)) {
switch (tagName) {
case 'select':
forms.select.push(InputHandler.Select(name));
break;
case 'textarea':
forms.textarea.push(InputHandler.Text('textarea', name));
break;
case 'input':
switch (type) {
case 'text':
forms.text.push(InputHandler.Text('text', name));
break;
case 'radio':
forms.radio.push(InputHandler.Check(name));
break;
case 'checkbox':
forms.checkbox.push(InputHandler.Check(name));
break;
}
break;
}
}
});
function getJson() {
var js = {};
var names = [];
var values = [];
for (var i in forms) {
var input = forms[i];
for (var j in input) {
if (input[j].length < 1 || input[j].getValue() === undefined || input[j].getValue() === null || input[j].getValue().length < 1)
continue;
var name = input[j].getName();
var value = input[j].getValue();
js[name] = function (jClone) {
return function () {
return value;
}();
}(j);
}
}
return js;
}
return {
get: function (typename) {
if (!typename) {
return forms;
} else {
return forms[typename];
}
},
toJson: function () {
return getJson();
},
toString: function () {
return JSON.stringify(getJson());
},
handlers: function () {
return InputHandler;
},
replaceHandler: function (name, func) {
for (var i in InputHandler) {
if (i === name) {
InputHandler[name] = func;
}
}
}
/*,
addFunction: function (name, func) {
this[name] = func;
return this;
}*/
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment