Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.12.2017, 10:37
Интересующийся
Отправить личное сообщение для Taichi Посмотреть профиль Найти все сообщения от Taichi
 
Регистрация: 05.12.2017
Сообщений: 14

Динамический подсчёт динамически созданных полей input
Доброго времени суток, форумчане.

Подскажите решение проблемы.

Есть скрипт для добавления полей в форме и нужен их подсчёт по событию 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();')				
		)


Надо Шт. умножить на Цену для каждой строки а потом результат сложить. У меня выходит сделать любые вычисления только с первой строкой, которая грузится вместе со страницей, все что добавляется "в будущем" подсчёту не поддаётся

Ткните носом пожалуйста, я в программировании очень слаб.
Изображения:
Тип файла: jpg Форма.jpg (99.5 Кб, 11 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 05.12.2017, 15:16
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Taichi,
проще иметь одну строку таблицы с полями, которую нельзя удалить (обязательная по умолчанию), и которую клонировать, и добавлять в таблицу.

Далее не понятно, почему именно onblur, а не например при изменениях в полях формы?
Ответить с цитированием
  #3 (permalink)  
Старый 05.12.2017, 18:12
Интересующийся
Отправить личное сообщение для Taichi Посмотреть профиль Найти все сообщения от Taichi
 
Регистрация: 05.12.2017
Сообщений: 14

Я и говорю что в программировании не селен, можно и на любой событие которое точно произойдет незаметно для пользователя.

Если клонировать строки, то после отправки формы они сольются в одну переменную $_POST ?

Мне нужна уникальность каждой введенной переменой.
Ответить с цитированием
  #4 (permalink)  
Старый 05.12.2017, 18:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Taichi
Если клонировать строки, то после отправки формы они сольются в одну переменную $_POST ?
Не знаю что подразумевается под "сольются" да и $_POST, это не переменная, а суперглобальный массив.

Сообщение от Taichi
Мне нужна уникальность каждой введенной переменой.
А что значит уникальность? Если у вас одна строка таблицы имеет к примеру два поля формы с именами abc и def, и они таковыми будут дублироваться, то в $_POST вы получите значение только последних полей. Но если эти имена определить как элементы массива - abc[] и def[], то $_POST будет содержать два индексных массива дынных, а индексы такая же уникальность как А и Б. Можно именовать поля и так, что в результате $_POST буде содержать один многомерный массив, вложения которого это поля abc и def соответственно под индексами 0 и 1, а можно и ассоциативное вложение, то есть в $_POST будет - [[abc=>значение, def=>значение], [abc=>значение, def=>значение], ...].

Какой структуры данные нужны серверу для обработки определяет он (серверный обработчик), из этого определения и будут определяться именование полей на клиенте. Так что определитесь с этим, дальнейшее будет от этого и зависеть. Только сразу предупреждаю - именование полей как name1 и подобное, это очень плохо.
Ответить с цитированием
  #5 (permalink)  
Старый 05.12.2017, 19:07
Интересующийся
Отправить личное сообщение для Taichi Посмотреть профиль Найти все сообщения от Taichi
 
Регистрация: 05.12.2017
Сообщений: 14

Хорошо, я вас понял, и далеко не претендую на правоту.

Но, как правильно использовать .clone() для input?
И как их значения сложить?

Я очень, очень туго разбираюсь в синтаксисе JQuery.

Пожалуйста, начертайте пример на 2х input в одной строке.
Ответить с цитированием
  #6 (permalink)  
Старый 05.12.2017, 19:38
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

<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']).
Ответить с цитированием
  #7 (permalink)  
Старый 05.12.2017, 19:46
Интересующийся
Отправить личное сообщение для Taichi Посмотреть профиль Найти все сообщения от Taichi
 
Регистрация: 05.12.2017
Сообщений: 14

Красивый код, моё почтение.
Но этот же функционал я слепил сам без клонирования, мне подсчет динамический важен.
a[0]*b[0]=x[0]
a[1]*b[1]=x[1]
и тд..

sum = x[0]+x[1]+....+x[n]

Вот этого я не могу решить =(
Ответить с цитированием
  #8 (permalink)  
Старый 05.12.2017, 19:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Taichi
Но этот же функционал я слепил сам без клонирования
Вот именно, что вы лепите, а проще клонировать, а не писать портянки.

Расчет же можно производить по событию ввода в поля, делегировав эту обработку тегу form, то есть добавить еще обработчик в $(function() { });

$('form').on('input', 'input', function() {
    //здесь обходом в цикле полей формы получать их значения и производить расчет согласно условиям
})
Ответить с цитированием
  #9 (permalink)  
Старый 05.12.2017, 20:14
Интересующийся
Отправить личное сообщение для Taichi Посмотреть профиль Найти все сообщения от Taichi
 
Регистрация: 05.12.2017
Сообщений: 14

Вот вы сыплете терминологией из вашей области познаний.
Но я же написал, что НЕ знаю js, jquery и языков программирования.

Вы меня исправили, что я не правильно сделал функционал добавления полей, я принял ваше решение, ссылаясь на подпись профессор под ником на форуме. Вы здесь гуру, вам виднее.

Проведу вам аналогию: Вы едете на своем самодельном транспорте в автосалон, покупать новое авто. Но вам продавец говорит: что это у вас за транспортное средство такое, неправильное, зачем вы его вообще слепили?
- Вот вам хороший набор колес, арок, дисков, шин, поршней, стекол, фар, проводки и вооон там в углу возьмите гаечный ключ и напильник, и скрутите себе Нормальное! авто.
Ответить с цитированием
  #10 (permalink)  
Старый 05.12.2017, 20:24
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Taichi
Вот вы сыплете терминологией из вашей области познаний.
Но я же написал, что НЕ знаю js, jquery и языков программирования.
Так а я откуда знаю что и как считать, мне тоже a[0]*b[0]=x[0] ни о чем не говорят, или если я знаю термины, то должен и догадаться?

Не надо аналогий, нужна помощь значит пишите конкретно - у вас 6 полей, значит так и пишите, к примеру, поле 1 умножить на поле 3 и поместить в поле 5, и т.п. Только учтите, если результат помещается также в поле формы для отправки серверу, то это дохлый номер, серверу эти расчеты не нужны, это чистый сервис для клиента.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подключение js к динамически созданным input Albionix Events/DOM/Window 28 13.09.2016 04:38
Проверка полей input и select на обязательность функция Jquery find() mxup Общие вопросы Javascript 5 02.08.2016 05:32
ID input, которая динамически меняется alex_ural Events/DOM/Window 13 06.04.2014 22:22
как прописать условия для полей input и textarea Nailya Общие вопросы Javascript 12 06.06.2013 16:48
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27