Как суммировать значения двух полей input и вывести результат в третьем поле?

Question

[P P]

Есть динамически создаваемые поля такого вида

<form action="">
    <div class="row">
        <input type="text" name="cost[]">
        <input type="text" name="amount[]">
        <input type="text" name="sum[]">
    </div>
    <a href="#" class="bottom-row" onclick="addOne()">Добавить еще одну строку полей</a>
</form>

а вот функции js для добавления и удаления полей

// функция добавления полей
function addOne() {
    $( ".bottom-row" ).before( '<div class="row"><input type="text" name="cost[]"><input type="text" name="amount[]"><input type="text" name="sum[]"><a href="#" onclick="removeOne(this)">x</a></div></div>');
    i++;
}

// ну и собственно функция удаления полей
function removeOne(obj) {
    $(obj).parent().remove();
}

необходимо суммировать значения полей 'cost[]' и 'amount[]', и отобразить их в соответствующем поле 'sum[]'

Answer 1

[Евгений Петров]

Не нужно в коде скрипта писать HTML код просто так. Лучше клонировать, или воспользоваться шаблонами (templates).
codepen.io/cleric/pen/lJbny

Comments

[P P]

Как можно вывести итоговую сумму в поле с именем resultsum.
пока не получается, пытаюсь сделать так:

$('[data-container="set"]').change(function() {
		var sum = 0;
		var a = $('[data-container="set"]').find('[name="sum[]"]').map(function(indx, element){
			sum += $(element).val();
				return sum;                       
			});
		$('[name="resultsum"]').val(sum);
		return false;
});

если не сложно, дайте пож-та подсказку на что обращать внимание (на синтаксис, метод или тут дело в алгоритме)? И в правильном ли я в пути?

[Евгений Петров]

@Kadi обновите пример. Я понимаю, что нынче распространено мнение — ресурсы компьютера дёшевы и заботиться о сокращении расходов не стоит. Поверьте, стоит. Когда вы научитесь делать всё сами, вопросы производительности выйдут на первый план.

1. Не нужно бегать по всем полям и складывать. Достаточно вычитать при удалении строки или добавлять разницу при изменении поля.

2. Вы опять пытаетесь отслеживать change. Я же написал пример, в котором используется input. Вы понимаете разницу между ними?

3. Если вы отслеживаете событие в элементе, какой смысл искать его в обработчике ещё раз? Для этого есть this, или в jQuery $(this).

[P P]

@Petroveg спасибо за помощь и советы. Вы очень и очень помогли. Буду стараться обращать внимание на производительность, но пока, что один факт работоспособности дается с трудом ) еще раз спасибо