|
Сообщение от ФедорН
|
|
Все ок.
|
Как душе угодно, но учтите, первый при этом требует проверки. А можно ведь и не клонировать, а удалять все, при этом по умолчанию нет никаких полей.
Поле можно добавлять используя ранее заготовленный шаблон, который описан в переменной или хранится как данные в атрибуте кнопки Добавить:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.myPrice {
border: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
$('button').click(function() {
$($(this).data('ins')).appendTo($('#form'))
.find('.myPrice').focus(function() {
this.blur()
})
.end()
.find('a').click(function() {
$(this).closest('.roword').remove()
})
});
//обработка изменения слайдера и выбора в списке
$('#form').on('input change', 'select,input', function() {
if(this.type == 'range') $(this).next().text(this.value) //отобразить значение слайдера
//рассчет
var o = $(this).closest('.roword').find('select,input'),
v = o.eq(0).val(),
w = o.eq(1).val(),
h = o.eq(2).val(),
r = o.last().val('');
if(v) {
v = v * w * h;
if(w * h <= 2399) v *= 1.1
else if(w * h >= 2400 && w * h <= 3999) v *= 1.055
else if(w * h >= 4000 && w * h <= 5399) v *= 1.03;
else if(w * h >= 5400 && w * h <= 6399) v *= 1.0135;
r.val(v.toFixed())
}
});
$('a').click(function() {
$('div.roword').filter(function() {
return !$(this).find('select').val()
}).remove();
var res = $.map($('div.roword'), function(e, i) {
return i+1 + '. ' + $.map($(e).find('select,input'), function(e) {
return e.value
}).join(', ');
}).join('\n');
if(res) {
$('textarea').val(res);
$('button').prop('disabled', 0);
}
})
});
</script>
</head>
<body>
<div id="form"></div>
<div class="clearfix"></div>
<button data-ins='<div class="roword"><div class="col-md-3 col-sm-6 col-xs-12 form-col-1"><select>
<option value="">Выберите цвет</option><option value="1.2">Зеленый</option><option value="1.6">Синий</option><option value="1.8">Красный</option></select>
</div><div class="col-md-3 col-sm-6 col-xs-12 form-col-2"><input type="range" min="40" max="300" value="40"><span>40</span></div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-3"><input type="range" min="40" max="200" value="40"><span>40</span></div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-4"><input class="myPrice" type="text" readonly> <a>Удалить</a></div></div>'>Добавить</button>
<div><textarea></textarea></div>
<a>Send</a>
</body>
</html>