Динамический подсчёт динамически созданных полей input
Вложений: 1
Доброго времени суток, форумчане.
Подскажите решение проблемы. Есть скрипт для добавления полей в форме и нужен их подсчёт по событию onBlur.
.append (
$('<td>')
.attr('id','td2_'+total)
.css({width:'10%'})
.append(
$('<input type="number" />')
.css({width:'95%'})
.attr('id','kil_'+total)
.attr('name','kile_'+total)
)
.append (
$('<td>')
.attr('id','td_'+total)
.css({width:'10%'})
.append(
$('<input type="number" />')
.css({width:'95%'})
.attr('id','cena_'+total)
.attr('name','cena_'+total)
.attr('class','suma')
.attr('onBlur','sum();')
)
Надо Шт. умножить на Цену для каждой строки а потом результат сложить. У меня выходит сделать любые вычисления только с первой строкой, которая грузится вместе со страницей, все что добавляется "в будущем" подсчёту не поддаётся :-? Ткните носом пожалуйста, я в программировании очень слаб. |
Taichi,
проще иметь одну строку таблицы с полями, которую нельзя удалить (обязательная по умолчанию), и которую клонировать, и добавлять в таблицу. Далее не понятно, почему именно onblur, а не например при изменениях в полях формы? |
Я и говорю что в программировании не селен, можно и на любой событие которое точно произойдет незаметно для пользователя.
Если клонировать строки, то после отправки формы они сольются в одну переменную $_POST ? Мне нужна уникальность каждой введенной переменой. |
Цитата:
Цитата:
Какой структуры данные нужны серверу для обработки определяет он (серверный обработчик), из этого определения и будут определяться именование полей на клиенте. Так что определитесь с этим, дальнейшее будет от этого и зависеть. Только сразу предупреждаю - именование полей как name1 и подобное, это очень плохо. |
Хорошо, я вас понял, и далеко не претендую на правоту.
Но, как правильно использовать .clone() для input? И как их значения сложить? Я очень, очень туго разбираюсь в синтаксисе JQuery. Пожалуйста, начертайте пример на 2х input в одной строке. |
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
table tbody:first-child td:last-child input {
display: none; /* кнопка удаления в первой строке таблицы недоступна*/
}
</style>
<script type="text/javascript">
$(function() {
var tbl = $('table');
$('#add').click(function() {
tbl.children() //получаем детишек - TR/TBODY
.first() //берем первого
.clone() //клонируем
.appendTo(tbl) //добавляем в таблицу
.find('input') //получаем поля ввода
.filter(':text').val('') //выбираем текстовые поля (если кнопка удаления не input, то этого не надо)
.end() //в начало набора
.last().click(function() { //получаем кнопку удаления (если кнопка удаления не input, то ищем нужно вместо last())
$(this).closest('tr').remove() //удаляем добавленную строку
})
})
});
</script>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>
<input name="a[]" />
</td>
<td>
<input name="b[]" />
</td>
<td>
<input name="c[]" />
</td>
<td>
<input type="button" value="Del" />
</td>
</tr>
</table>
</form>
<button id="add">Add</button>
</body>
</html>
При отправлении формы в массиве $_POST будет три массива a, b, c соответственно. Так удобно, ибо, например, для того чтобы проверить и получить только те поля которые заполнены, достаточно произвести пересечение этих массивов по ключам (индексам). А для формирования многострочного запроса в базу (для записи), достаточно пересечь результат пересечения с каждым набором и объединить их по полям - array_map(null, $_POST['a'], $_POST['b'], $_POST['c']). |
Красивый код, моё почтение.
Но этот же функционал я слепил сам без клонирования, мне подсчет динамический важен. a[0]*b[0]=x[0] a[1]*b[1]=x[1] и тд.. sum = x[0]+x[1]+....+x[n] Вот этого я не могу решить =( |
Цитата:
Расчет же можно производить по событию ввода в поля, делегировав эту обработку тегу form, то есть добавить еще обработчик в $(function() { });
$('form').on('input', 'input', function() {
//здесь обходом в цикле полей формы получать их значения и производить расчет согласно условиям
})
|
Вот вы сыплете терминологией из вашей области познаний.
Но я же написал, что НЕ знаю js, jquery и языков программирования. Вы меня исправили, что я не правильно сделал функционал добавления полей, я принял ваше решение, ссылаясь на подпись профессор под ником на форуме. Вы здесь гуру, вам виднее. Проведу вам аналогию: Вы едете на своем самодельном транспорте в автосалон, покупать новое авто. Но вам продавец говорит: что это у вас за транспортное средство такое, неправильное, зачем вы его вообще слепили? - Вот вам хороший набор колес, арок, дисков, шин, поршней, стекол, фар, проводки и вооон там в углу возьмите гаечный ключ и напильник, и скрутите себе Нормальное! авто. |
Цитата:
Не надо аналогий, нужна помощь значит пишите конкретно - у вас 6 полей, значит так и пишите, к примеру, поле 1 умножить на поле 3 и поместить в поле 5, и т.п. Только учтите, если результат помещается также в поле формы для отправки серверу, то это дохлый номер, серверу эти расчеты не нужны, это чистый сервис для клиента. |
общая сумма строк
Taichi,
вставить количество и цену
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
table tbody:first-child td:last-child input {
display: none; /* кнопка удаления в первой строке таблицы недоступна*/
}
.total {
margin-left: 400px;
}
</style>
<script type="text/javascript">
$(function() {
var tbl = $('table');
$('#add').click(function() {
tbl.children() //получаем детишек - TR/TBODY
.first() //берем первого
.clone() //клонируем
.appendTo(tbl) //добавляем в таблицу
.find('input') //получаем поля ввода
.filter(':text').val('') //выбираем текстовые поля (если кнопка удаления не input, то этого не надо)
.end() //в начало набора
.last().click(function() { //получаем кнопку удаления (если кнопка удаления не input, то ищем нужно вместо last())
$(this).closest('tr').remove() //удаляем добавленную строку
sum();
})
});
function sum()
{
var a = document.querySelectorAll('input[name="a[]"]'),
b = document.querySelectorAll('input[name="b[]"]'),
c = document.querySelectorAll('input[name="c[]"]'),
t = document.querySelector('.total');
t.innerHTML = [].reduce.call( a , function(s, el, i) {
c[i].value = (+el.value||0) * (+b[i].value||0);
return s + +c[i].value
},0).toFixed(2) + " руб.";
}
$('form').on('input', 'input[name="a[]"], input[name="b[]"]', sum)
});
</script>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>
<input name="a[]" />
</td>
<td>
<input name="b[]" />
</td>
<td>
<input name="c[]" disabled="disabled"/>
</td>
<td>
<input type="button" value="Del" />
</td>
</tr>
</table>
<span class="total"></span>
</form>
<button id="add">Add</button>
</body>
</html>
|
Спасибо, большое спасибо. Все в точку, как надо.:thanks:
|
И снова проблема у меня.
Загнал я эти инпуты в базу данных. Вытянул данные, расставил в те же инпуты, что бы можно было динамически редактировать (удалять уже записанную строку, добавить новою, и снова это все динамически подсчитать) Меня очень напрягает синтаксис java. Подскажите, как реализовать?
<script type="text/javascript">
$(function() {
//добавить строку табюлицы
$('#but').on('click', function() {
var row = $('.row:last');
row.clone().insertAfter(row);
});
//удалить строку таблицы
$('#tab').on('click', '.delete', removeRow);
function removeRow() {
$(this).closest('.row').remove();
}
})
function sum()
{
var a = document.querySelectorAll('input[name="a[]"]'),
b = document.querySelectorAll('input[name="b[]"]'),
c = document.querySelectorAll('input[name="c[]"]'),
t = document.querySelector('.total');
alert( 'Привет, Мир!' );
t.innerHTML = [].reduce.call( a , function(s, el, i) {
c[i].value = (+el.value||0) * (+b[i].value||0);
return s + +c[i].value
},0).toFixed(2) + " грн";
}
$('form').on('input', 'input[name="a[]"], input[name="b[]"]', sum)
</script>
а вот php i html echo "<tr class='row'> <td width='16%'><input type='text' name='art[]' style='width:100%' value=".$art[$x]."></td> <td width='16%'><input type='text' name='name[]' style='width:100%' value=".$name[$x]."></td> <td width='8%'><input type='number' min='1' name='a[]' style='width:100%' value=".$a[$x]."></td> <td width='16%'><input type='text' name='dealer[]' style='width:100%' value=".$dealer[$x]."></td> <td width='8%'><input type='number' min='0' name='zakup[]' style='width:100%' value=".$zakup[$x]."></td> <td width='8%'><input type='number' min='0' name='b[]' style='width:100%' value=".$b[$x]."></td> <td width='8%'><input type='text' name='с[]' style='width:100%' disabled='disabled' ></td> <td width='2%'><input type='checkbox' name='stage1[]' style='width:100%' value=".$stage1[$x]."></td> <td width='2%'><input type='checkbox' name='stage2[]' style='width:100%' value=".$stage2[$x]."></td> <td width='2%'><input type='checkbox' name='stage3[]' style='width:100%' value=".$stage3[$x]."></td> <td width='2%'><a href='#'><input class='delete' type='button' value='x' /> </a></td> </tr>";} ?> </table> <table id="tab" width="100%" > <tr class='row'> <td width='16%'><input type='text' name='art[]' style='width:100%'></td> <td width='16%'><input type='text' name='name[]' style='width:100%' ></td> <td width='8%'><input type='number' min='1' name='a[]' style='width:100%' ></td> <td width='16%'><input type='text' name='dealer[]' style='width:100%'></td> <td width='8%'><input type='number' min='0' name='zakup[]' style='width:100%' ></td> <td width='8%'><input type='number' min='0' name='b[]' style='width:100%' ></td> <td width='8%'><input type='text' name='c[]' style='width:100%' disabled='disabled' ></td> <td width='2%'><input type='checkbox' name='stage1[]' style='width:100%'></td> <td width='2%'><input type='checkbox' name='stage2[]' style='width:100%' ></td> <td width='2%'><input type='checkbox' name='stage3[]' style='width:100%' ></td> <td width='2%'> <input type="button" class='delete' value="x" /> </td> </tr></table> <input type="button" value="Добавить еще поля" id="but" > <input type="submit" value="Редактировать заказ"> </form> <span style="margin-left:600px" class="total">Вся сумма заказа грн.</span> |
| Часовой пояс GMT +3, время: 09:40. |