Как превратить форму HTML в сложный объект JavaScript
Существует ли способ превратить форму в сложный JavaScript, основанный на объектах некоторая структурированная форма?
Теперь, я понятия не имею, должно ли это быть сделано лучшим способом, но в основном я хочу что-то вроде этого:
<form>
<input name="Foo" value="1" />
<input name="Parent.Child1" value="1" />
<input name="Parent.Child2" value="2" />
</form>
и я хочу это в JavaScript:
var form = GetForm();
var obj = ConvertFormToComplexObject(form);
//
// Followings should be true
//
// obj.Foo == 1;
// obj.Parent != null
// obj.Parent.Child1 == 1;
// obj.Parent.Child2 == 2;
//
Какие-либо предложения?
Спасибо,
1
задан Andreas Köberle 5 August 2010 в 20:52
поделиться
5 ответов
Я написал плагин, чтобы сделать именно это. Надеюсь, он поможет кому-нибудь. Дайте мне знать, если вы найдете какие-либо ошибки.
Вот код для serializeObject.js:
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
var arrayIndex = function(name) {
//note: 2d array not handled
var startIndex = name.indexOf('[');
var endIndex = name.indexOf(']');
if (startIndex == -1 || endIndex == -1 || endIndex != name.length - 1)
return null;
return name.substr(startIndex + 1, endIndex - startIndex - 1);
}
var trimArrayIndex = function(name) {
var startIndex = name.indexOf('[');
return name.substr(0, startIndex);
}
var createObject = function(obj, className, value) {
if (className.length == 0)
return;
var classNames = className.split(".");
if (classNames.length == 1) {
if (obj[classNames[0]] == null) {
obj[classNames[0]] = value;
}
else if (obj[classNames[0]] instanceof Array) {
obj[classNames[0]].push(value);
}
else {
var temp = obj[classNames[0]];
obj[classNames[0]] = new Array();
obj[classNames[0]].push(temp);
obj[classNames[0]].push(value);
}
return;
}
var index = arrayIndex(classNames[0]);
var isArray = index != null;
if (!isArray) {
if (obj[classNames[0]] == null) {
obj[classNames[0]] = new Object();
}
createObject(obj[classNames[0]], className.substr(classNames[0].length + 1), value);
}
else {
var aryName = trimArrayIndex(classNames[0]);
if (obj[aryName] == null) {
obj[aryName] = new Array();
}
else if (!obj[aryName] instanceof Array) {
throw "unable to serialize " + aryName + " as an array";
}
var ary = obj[aryName];
var nextObj;
if (ary[parseInt(index)] == null) {
ary[parseInt(index)] = new Object();
}
nextObj = ary[parseInt(index)];
createObject(nextObj, className.substr(classNames[0].length + 1), value);
}
}
createObject(o, this.name, this.value || '');
});
return o;
};
$.fn.replaceStarWithIndex = function() {
var a = this.serializeArray();
var form = this;
var arrayIndex = function(name) {
var startIndex = name.indexOf('[');
var endIndex = name.indexOf(']');
if (startIndex == -1 || endIndex == -1) {
return null;
}
return name.substr(startIndex + 1, endIndex - startIndex - 1);
}
var trimArrayIndex = function(name) {
var startIndex = name.indexOf('[');
return name.substr(0, startIndex);
}
for (var key in a) {
var index = arrayIndex(a[key].name);
if (index == null || index != "*") {
continue;
}
var count = 0;
var trimName = trimArrayIndex(a[key].name);
while (true) {
var elementName = a[key].name.replace('*', count);
var element = form[0][elementName];
if (element == null) {
$(form[0][a[key].name]).first().attr('name', elementName);
break;
}
count++;
}
}
}
Вот тест:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
<link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js" ></script>
<script type="text/javascript" src="serializeObject.js" ></script>
</head>
<body>
<h1 id="qunit-header">Test serializeObject</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<!--Test Form -->
<form id="form1" style="display:none;">
<input type="text" name="Parent.Child1" value="child1"/>
<input type="text" name="Parent.Child2" value="child2a"/>
<input type="text" name="Parent.Child2" value="child2b"/>
<input type="text" name="Parent.Child3" value="3"/>
<input type="text" name="Parent.Child3" value="2"/>
<input type="text" name="Parent.Child3" value="1"/>
<input type="text" name="Parent.Child4[0].Child1" value="11" />
<input type="text" name="Parent.Child4[0].Child2" value="aa" />
<input type="text" name="Parent.Child4[1].Child1" value="22" />
<input type="text" name="Parent.Child4[1].Child2" value="bb" />
</form>
<form id="form2" style="display:none;">
<input type="text" name="Child1[0].Child1" value="0" />
<input type="text" name="Child1[*].Child1" value="1" />
<input type="text" name="Child1[*].Child1" value="2" />
<input type="text" name="Child2[2]" value="2" />
<input type="text" name="Child2[*]" value="0" />
<input type="text" name="Child2[*]" value="1" />
</form>
<script type="text/javascript">
$(document).ready(function() {
var obj = $('#form1').serializeObject();
test("Parent should exist", function() {
equals(true, obj.Parent != null);
});
test("Child1 should exist within parent", function() {
equals(true, obj.Parent.Child1 != null);
});
test("Should create array for items with same name", function() {
equals("child2a", obj.Parent.Child2[0]);
equals("child2b", obj.Parent.Child2[1]);
equals("3", obj.Parent.Child3[0]);
equals("2", obj.Parent.Child3[1]);
equals("1", obj.Parent.Child3[2]);
});
test("Should allow array of objects", function() {
equals("11", obj.Parent.Child4[0].Child1);
equals("aa", obj.Parent.Child4[0].Child2);
equals("22", obj.Parent.Child4[1].Child1);
equals("bb", obj.Parent.Child4[1].Child2);
});
$('#form2').replaceStarWithIndex();
test("Should replace * with index", function() {
equals("0", $('#form2 input[name="Child1[0].Child1"]').val());
equals("1", $('#form2 input[name="Child1[1].Child1"]').val());
equals("2", $('#form2 input[name="Child1[2].Child1"]').val());
equals("0", $('#form2 input[name="Child2[0]"]').val());
equals("1", $('#form2 input[name="Child2[1]"]').val());
equals("2", $('#form2 input[name="Child2[2]"]').val());
});
});
</script>
</body>
</html>
2
ответ дан 2 September 2019 в 22:24
поделиться
я думаю, вы просите document.forms [0]
что-то вроде:
var form = document.forms [0]; // или может быть document.getElementByName ...
, тогда вы можете получить доступ к его значениям, когда пытаетесь: form.Foo = 1
вам не нужно преобразовывать его в сложный объект, для этого достаточно DOM
0
ответ дан 2 September 2019 в 22:24
поделиться
var form = document.forms[0];
вернуть объект элемента HTML, вы можете использовать
form.Foo
получить элемент HTML тоже
, но если вы хотите получить значение, необходимо использовать:
form.Foo.value
или
form['Parent.Child1'].value;
вы можете см. это DEMO
PS Я думаю, что метод ConvertFormToComplexObject () не подходит. Вам не нужно его создавать.
0
ответ дан 2 September 2019 в 22:24
поделиться
Многие библиотеки Javascript имеют эту функцию. Я предлагаю вам воспользоваться их реализацией или хотя бы посмотреть, как они это сделали.
Прототип: http://www.prototypejs.org/api/form/serialize
Использование: $ ('id-of-form'). Serialize (true)
0
ответ дан 2 September 2019 в 22:24
поделиться
Это очень простая версия с именами [0], но она должна дать вам общее представление о том, как это работает.
$(function(){
var elements = document.forms[0].elements,
foo = {};
for(var i=0; i<elements.length; i++) {
var element = elements[i];
var names = element.name.split('.');
if(names.length >1) {
foo[names[0]] = foo[names[0]] || {};
foo[names[0]][names[1]] = element.value;
} else {
foo[names[0]] = element.value;
}
}
console.log(foo)
});
0
ответ дан 2 September 2019 в 22:24
поделиться
Другие вопросы по тегам: