Created
November 24, 2015 02:39
-
-
Save keke1123/c16789167779819b9c94 to your computer and use it in GitHub Desktop.
Simple jQuery data form binder script
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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