Суммирование значений по всем динамически добавленным полям
Добрый день. Сразу скажу, что я очень слабо разбираюсь в JS, но стараюсь из всех сил.
Передо мной стала задача: сделать суммирование значений по всем динамически добавленным полям. У меня есть механизм динамического создания двух input полей и расчет сложения значений из них с выводом в span. Поля имеют ID item5 и itemm5, а span - result5, где 5 - номер динамически добавленной строки с полями. Т.е. грубо говоря, выглядит это так: [2]+[2] = 4 (id элементов в окончании имеют "1") [2]+[3] = 5 (id элементов в окончании имеют "2") [1]+[1] = 2 (id элементов в окончании имеют "3") и т.д. Мне нужно произвести подсчет значений из input item и span. Как это сделать? |
Какая разница че какие у них айдишники :D
Ты просто когда создаешь их - складывай в массивчик. А когда нужно - пройдись по массивчику и просуммируй свойства .value инпутов. Вобще до конца не понял че ты там мутишь. Показывай пример что-ли. |
Да, как понимаю про массив Вы правы. Я не знаю как его реализовать. ID я привел для того, чтоб стало понятно какая закономерность их создания.
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<script language="javascript">
var items=1;
function AddItem() {
var div=document.getElementById("items");
var button=document.getElementById("add");
items++;
var newitem="<strong>Поле " + items + ": </strong>";
newitem+="<select onchange=\"calc(" + items + ")\" name='select_name" + items + "' id='select_name" + items + "'>";
newitem+="<option value='1'>один";
newitem+="<option value='2' selected='selected'>два";
newitem+="<option value='3'>три";
newitem+="</select>";
var newitemm="<strong> Поле_ " + items + ": </strong>";
newitemm+="<input value=\"3\" onchange=\"calc(" + items + ")\" type=\"text\" name=\"itemm" + items +"\" id =\"itemm" + items +"\" size=\"45\">";
newitemm+="Стоимость: <span id=\"result" + items + "\">0</span> руб.";
newnode=document.createElement("div");
newnode.id = "item_" + items;
newnode.innerHTML=newitem+newitemm;
div.insertBefore(newnode,button);
var strok = document.getElementById("strok"); //получаем ссылку на элемент span, в него будем писать количество всех строк
var strokk = items;
strok.innerHTML = strokk;
}
function calc(t) {
var type_design = document.getElementById("select_name" + t); //получаем ссылку на элемент Select
var count = document.getElementById("itemm" + t); //получаем ссылку на элемент input
var result = document.getElementById("result" + t); //получаем ссылку на элемент span, в него будем писать стоимость одной строки
var resultitog = document.getElementById("resultitog"); //получаем ссылку на элемент span, в него будем писать стоимость всех строк
var price = 0;
var priceitog = 0;
price += parseInt(type_design.options[type_design.selectedIndex].value);
price = price + parseInt(count.value);
result.innerHTML = price;
resultitog.innerHTML = priceitog;
}
</script>
</head>
<body>
<form method="post" action="/calc.php?=send">
<div ID="items">
<div id="item_2">
<strong>Поле 1: </strong>
<select id="select_name1" name="select_name1" onchange="calc(1)">
<option value="1">один</option>
<option selected="selected" value="2">два</option>
<option value="3">три</option>
</select>
<strong>Поле_ 1: </strong>
<input id="itemm1" type="text" size="45" name="itemm1" onchange="calc(1)" value="3">
Стоимость: <span id="result1">4</span>руб.
</div>
<input type="button" value="Добавить поле" onClick="AddItem();" ID="add">
</div>
<input type="submit" value="Отправить" name="submit">
</form>
<div>Всего строк: <span id="strok">1</span> руб.</div>
<div>Всего значения по input: <span id="summainput">1</span> руб.</div>
<div>Стоимость заказа: <span id="resultitog">0</span> руб.</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 16:15. |