|
Сообщение от Дзен-трансгуманист
|
|
По сути, дополнительные данные даже не обязательно прописывать прямо в форму. Куда проще зарядить всё что нужно в некий исходный массив (или подгружать аяксом, если так удобнее), а форму заполнить динамически прямо из скрипта.
|
Что-то типа такого...
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
label {
display: block;
}
p {
margin: 0;
}
</style>
<script type="text/javascript">
var data={
'Пупкино': {
'жители': 100,
'дети': 20,
'дома': 5,
'соцобъекты': 1
},
'Светлово': {
'жители': 200,
'дети': 150,
'дома': 10,
'соцобъекты': 3
}
};
function sum() {
var o=document.getElementsByName('data');
var i,cod,j,oc,op;
var inf={};
for (i=0; i<o.length; i++) {
if (!o[i].checked) {
continue;
};
cod=o[i].value
for (j in data[cod]) {
inf[j]=(inf[j]||0)+data[cod][j];
};
};
var oc=document.getElementById('info');
oc.innerHTML='';
for (i in inf) {
op=document.createElement('p');
o=document.createTextNode(i+': '+inf[i]);
op.appendChild(o);
oc.appendChild(op);
};
};
function init() {
var oc=document.getElementById('data');
var ol,o,cod;
for (cod in data) {
ol=document.createElement('label');
o=document.createElement('input');
o.type='checkbox';
o.value=cod
o.name='data'
ol.appendChild(o);
o=document.createTextNode(cod);
ol.appendChild(o);
oc.appendChild(ol);
};
};
</script>
</head>
<body onload='init();'>
<form id='frm'>
<div id='data'></div>
<input type="button" value='Посчитать' onclick="sum()">
<div id='info'></div>
</form>
</body>
</html>
