<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<form>
<div id="parentId">
<div>
<nobr><input name="name[1]" class="field" type="text" style="width:300px;" placeholder="Укажите площадь комнаты" oninput="calculate()"/>
<select size="1" name="type[1]" style="width:150px;" class="uklad">
<option value="1.05">Прямая укладка</option>
<option value="1.07">Диагональная укладка</option>
</select>
<a style="color:red;" onclick="return deleteField(this)" href="#">[—]</a>
<a style="color:green;" onclick="return addField()" href="#">[+]</a></nobr>
</div>
</div>
<input name="submit" type="button" class="submit" value="ОК">
<br>
<label for="square">Полная площадь: </label><input type="text" id=square value="click a button">
</form>
var countOfFields = 1; // Текущее число полей
var curFieldNameId = 1; // Уникальное значение для атрибута name
var maxFieldLimit = 25; // Максимальное число возможных полей
function deleteField(a) {
if (countOfFields > 1)
{
// Получаем доступ к ДИВу, содержащему поле
var contDiv = a.parentNode;
// Удаляем этот ДИВ из DOM-дерева
contDiv.parentNode.removeChild(contDiv);
// Уменьшаем значение текущего числа полей
countOfFields--;
}
// Возвращаем false, чтобы не было перехода по сслыке
return false;
}
function addField() {
// Проверяем, не достигло ли число полей максимума
if (countOfFields >= maxFieldLimit) {
alert("Число полей достигло своего максимума = " + maxFieldLimit);
return false;
}
// Увеличиваем текущее значение числа полей
countOfFields++;
// Увеличиваем ID
curFieldNameId++;
// Создаем элемент ДИВ
var div = document.createElement("div");
// Добавляем HTML-контент с пом. свойства innerHTML
div.innerHTML = "<nobr><input name=\"name[" + curFieldNameId + "]\" type=\"text\" style=\"width:300px;\" class=\"field\" placeholder=\"Укажите площадь комнаты\" oninput=\"calculate()\" /> <select class=\"uklad\" size=\"1\" name=\"type[" + curFieldNameId + "]\" style=\"width:150px;\" ><option value=\"1.05\">Прямая укладка</option><option value=\"1.07\">Диагональная укладка</option></select> <a style=\"color:red;\" onclick=\"return deleteField(this)\" href=\"#\">[—]</a> <a style=\"color:green;\" onclick=\"return addField()\" href=\"#\">[+]</a></nobr>";
// Добавляем новый узел в конец списка полей
document.getElementById("parentId").appendChild(div);
// Возвращаем false, чтобы не было перехода по сслыке
return false;
}
function calculate() {
var answers = [];
$.each($('.field'), function() {
answers.push($(this).val());
});
if(answers.length == 0) {
answers = "none";
}
console.log(answers);
return false;
}
$(document).ready(function(){
// here's our click function for when the forms submitted
$('.submit').click(function(){
var fields = [];
$.each($('.field'), function() {
fields.push($(this).val());
});
var uklads = [];
$.each($('.uklad'), function() {
uklads.push($(this).val());
});
if(fields.length == 0) {
fields = "none";
}
var summ = 0;
fields.forEach(function(item, i, arr) {
console.log( i + ": " + item + uklads[i] );
summ = summ + item*uklads[i];
});
$( "#square" ).val( summ );
console.log(summ);
return false;
});
});
