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

Добрый день :help: . Я в 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);
            });

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

Смысл идентификации в уникальности, а вашими 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 в примере), иначе сложно будет написать компактно. Как и что суммировать не понятно, и в какую колонку, поэтому смотрите пример и изменяйте под свое.

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

<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>

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

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

В 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?

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

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

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

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

на

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

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

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

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

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

Извините что голову морочу все заработало у меня jquery библиотека была старая.
Огромное вам спасибо за помощь очень благодарин.

Добрый день подскажите как результат который вносится в id="total" округлить до 3-х знаков?

Vital9, строка 9

a[i+1] += +v.toFixed(3);

Не работает вот картинка.
Может из за библиотеки? я использую jquery-1.8.min.js

Вот ещё 1 картинка.

Вопрос: данные из базы?
Ответ: нет, данные будут в форме!
Диагноз: резать не дожидаясь перитонита.

Да данные из базы. Получаю данные из базы и умножаем на число в инпуте, а потом суммируем.

Что не кто не может помочь?:help:

Vital9,
сделайте нормальный пример, чтоб можно было понять что у вас не округляется

Vital9,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .total{
       border: #FF0033 2px solid;
       display: inline-block;
     }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
  <script>
$(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[i+1] = +a[i+1].toFixed(3)
                })
                a[0] += n;
            }
         });
         $('#total').html('<span>' + a.join('</span> <span>') + '</span>')
    })
});
  </script>
</head>

<body>



<form>
    <div><input type="text" name="salt" />В: <span data-v="2">a1</span> Н: <span data-v="4.89">a2</span></div>
    <div><input type="text" name="pepper" />В: <span data-v="32">b1</span> Н: <span data-v="1.789">b2</span></div>
    <div><input type="text" name="sugar" />В: <span data-v="12">c1</span> Н: <span data-v="3.098">c2</span></div>
</form>
<b class="total"><div id="total"></div> это id="total" тут всё округляется</b>


</body>
</html>

Спасибо большое вот это строчка a[i+1] = +a[i+1].toFixed(3) помогла.:dance: