Калькулятор продуктов

[Vital9]

Добрый день . Я в JS новичок и уже третий день не могу найти решения этой проблемы. Нужно просто вывести суму результата всех активных В и Н.

<form action="" method="post">
            <input type="checkbox" name="check_list[]" value="Соль" id="check_soli"><br/><label for="check_soli">Соль</label><br/>
            <input type="checkbox" name="check_list[]" value="Перец" id="check_peres"><label for="check_peres">Перец</label><br/>
            <input type="checkbox" name="check_list[]" value="Сахао" id="check_sahar"><label for="check_sahar">Сахао</label><br/>
            <input type="submit" />
        </form>

<?php
        if(!empty($_POST['check_list'])){
            foreach($_POST['check_list'] as $check){
                echo $check.' ';
                if($check=='Соль'){
                    echo '<input type = "text" name = "soli" id = "soli" />В: <span id = "errmsg"></span> Н: <span id = "kal"></span>';
                    echo '<br/>';
                }
                if($check=='Перец'){
                    echo '<input type = "text" name = "peres" id = "peres" />В: <span id = "peres_kk"></span> Н: <span id = "peres_vv"></span>';
                    echo '<br/>';
                }
                if($check=='Сахао'){
                    echo '<input type = "text" name = "sahar" id = "sahar" />В: <span id = "sahar_kk"></span> Н: <span id = "sahar_vv"></span>';
                    echo '<br/>';
                }
				
            }
			
        }
        ?>

$('#soli').keyup(function () {
                $('#errmsg').text(($(this).val()) * 2);
                $('#kal').text(($(this).val())  * 4);
			});
            $('#peres').keyup(function () {
                $('#peres_kk').text(($(this).val()) * 32);
                $('#peres_vv').text(($(this).val()) * 1);
            });
            $('#sahar').keyup(function () {
                $('#sahar_kk').text(($(this).val()) * 12);
                $('#sahar_vv').text(($(this).val()) * 3);
            });

[laimas]

Сперва такой вопрос - данные из базы, то есть соль, перец и другие специи?

[laimas]

Смысл идентификации в уникальности, а вашими check_soli и soli обеспечить это будет проблематично. Идентификатор в базе, это номер, и никаких гвоздей, и по этим номерам и должны идентифицироваться элементы формы на сервере, а у вас не идентификация, а каша.

Писать html вот так:

type = "text" name = "sahar" - это скармливать клиенту пустоту ничего незначащую.

$(function() {
    var e = $('form').find('input:text').keyup(function() {
         var a = [0,0,0];
         e.each(function() {
            if(n = this.value.replace(/\D/g,'')*1) {
                $(this.parentNode).find('span').each(function(i, e) {
                   var v = n * $(e).data('v');
                   $(e).text(v);
                   a[i+1] += v;
                })
                a[0] += n;
            }
         });
         $('#total').html('<span>' + a.join('</span> <span>') + '</span>')
    })
});

<form>
    <div><input type="text" name="salt" />В: <span data-v="2">a1</span> Н: <span data-v="4">a2</span></div>
    <div><input type="text" name="pepper" />В: <span data-v="32">b1</span> Н: <span data-v="1">b2</span></div>
    <div><input type="text" name="sugar" />В: <span data-v="12">c1</span> Н: <span data-v="3">c2</span></div>
</form>
<div id="total"></div>

salt - соль, pepper - перец, sugar - сахар.

Данные на которые надо умножать должен хранить элемент (data-v в примере), иначе сложно будет написать компактно. Как и что суммировать не понятно, и в какую колонку, поэтому смотрите пример и изменяйте под свое.

[Vital9]

Извини может я покажусь немного туповатым передается сума

<div id="total"></div>

но в data-v никаких действий не происходит, он не множит и не выводит результат.
Здесь все работает

<div id="total"></div>

сума всех импут суммируется:
на да еще чтобы :

<div id="total2"></div> суммировал <span data-v="2">a1</span><span data-v="32">b1</span> <span data-v="12">c1</span>

и выводил суму например в

<div id="total2"></div>

а также

<div id="total3"></div> суммировал<span data-v="4">a2</span><span data-v="1">b2</span><span data-v="3">c2</span>

и выводил суму например в

<div id="total3"></div>

Буду очень признателен если поможете.

[laimas]

Я может тоже туповат , но из этого пояснения ничерта не понял.

В DIV total в моем примере выводится сумма (в колонках): а) значение полей; б) первых span после inut; в) вторых span после inut;

Что значит?:

на да еще чтобы :
<div id="total2"></div> суммировал <span data-v="2">a1</span><span data-v="32">b1</span> <span data-v="12">c1</span>
и выводил суму например в
<div id="total2"></div>

помещать в каждый div сумму поля и двух span?

[Vital9]

[IMG][/IMG]
надеюсь картинка поможет))

[laimas]

А я вам значит не это сделал?

Ну замените эту ст року:

$('#total').html('<span>' + a.join('</span> <span>') + '</span>')

на

$('#total').html('Итог: <span>' + a.join('</span> Итог: <span>') + '</span>')

будет итого. Можете "итог" обернуть в элементы и стилями раскидать их как вздумается, какая проблема? Зачем вам обязательно div и total1, total2 ..., это так принципиально или с float париться хочется?

[Vital9]

$('#total').html('<span>' + a.join('</span> <span>') + '</span>')

этот код что вы скинули он не работает он считает суму только импут

[laimas]

Вы уверены в этом? А вот у меня считает.

[Vital9]

[IMG][/IMG]
вот что выводит 0 везде кроме импут