Javascript-форум - проблемы в калькуляции HELLP!!!

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - проблемы в калькуляции HELLP!!! (https://javascript.ru/forum/misc/68318-problemy-v-kalkulyacii-hellp.html)

Andree007

08.04.2017 18:39

проблемы в калькуляции HELLP!!!

Ребят помогите... целый день парюсь с задачей которая выеденого яйца не стоит, голову всю сломал не знаю как checkbox - задать формулу нахождения процента от суммы элементов

вот собственно код

<!DOCTYPE >
<head>
	<title>Страница</title>
	<link rel="stylesheet" href="css/template.css" type="text/css" />
	<script type="text/javascript" src="js/calculator.js"></script>
</head>
<body>
<form method=post id="myform">
<table border="2" cellpadding="0" cellspacing="0" height="200" width="650" id="" >
<tbody>
<tr>
       <td valign="top" width="180">Сварка </td>
	   <td valign="top" width="80">7,5 р / см</td>
	   <td valign="top" width=""><INPUT TYPE="number" style="width:30px" VALUE="0" id="a1"></td>
</tr>
<tr>
       <td valign="top" width="180">Рез, зачистка реза, сборка</td>
	   <td valign="top" width="80">32 р / шт</td>  
	   <td valign="top" width="80"><INPUT TYPE="number" style="width:30px" VALUE="0" id="a2"></td>
<tr>
       <td valign="top" width="180">Зачистка шва</td>
	   <td valign="top" width="80">2 р / см</td> 
	   <td valign="top" width="80"><INPUT TYPE="number" style="width:30px" VALUE="0" id="a3"></td>
</tr>
<tr>
       <td valign="top" width="180">Покраска, обезжиривание, грунт (лист)</td>
	   <td valign="top" width="80">230 р / м.кв</td>
	   <td valign="top" width="80"><INPUT TYPE="number" style="width:30px" VALUE="0" id="a4"></td>
</tr>
<tr>
       <td valign="top" width="180">Покраска, обезжиривание, грунт (профиль)</td>
	   <td valign="top" width="80">30 р  /м.п</td>
	   <td valign="top" width="80"><INPUT TYPE="number" style="width:30px" VALUE="0" id="a5"></td>
</tr>
<tr>
       <td valign="top" width="180">Шпаклевка шва</td>
	   <td valign="top" width="80">15 р / шт</td>
	   <td valign="top" width="80"><INPUT TYPE="number" style="width:30px" VALUE="0" id="a6"></td>
</tr>
<tr>
       <td valign="top" width="180">Шлифовка шва </td>
	   <td valign="top" width="80">36 р / шт</td>
	   <td valign="top" width="80"><INPUT TYPE="number" style="width:30px" VALUE="0" id="a7"></td>	  
</tr>
<tr>
       <td valign="top" width="180">Монтаж на объекте</td>
	   <td valign="top" width="80">20%</td>
	   <td valign="top" width="80"><INPUT TYPE="CHECKBOX" id="a8"></td>
</tr>
<tr>
       <td valign="top" width="180">Дизайн</td>
	   <td valign="top" width="80">30%</td>
	   <td valign="top" width="80"><INPUT TYPE="CHECKBOX" id="a9"></td>
</tr>
<tr>
       <td valign="top" width="180">Выезд замерщика</td>
	   <td valign="top" width="80">800р </td> 
	   <td valign="top" width="80"><INPUT TYPE="CHECKBOX" id="a10"></td>
</tr>
<tr>
       <td valign="top" width="280"><div id="rezz">итог</div></td>
       
       <td valign="top" width="50"> <INPUT NAME="r" SIZE="9" TYPE="text"></td>
</tr>
  
</tbody>
</table>
 </form>
</body>
</html>

$('document').ready(function(){

    $('input').on('input',function(){
       
    
    var a1,a2,a3,a4,a5,a6,a7;
         a1=$("#a1").val()*7.5;
         a2=32 *$("#a2").val();
         a3=2 *$("#a3").val();
         a4=230 *$("#a4").val();
         a5=30 *$("#a5").val();
         a6=15 *$("#a6").val();
         a7=36 *$("#a7").val();

var c =$('a8').on('click', function(){
       (a1+a2+a3+a4+a5+a6+a7)*20/100

});


var z
z=a1+a2+a3+a4+a5+a6+a7+c;   

$('#rezz').html(z);
});

});

laimas

08.04.2017 19:05

$('input').on('input', function(){
     $('a8').on('click', function()....
})

то-есть вполне нормально? И что такое 'a8'?

Andree007

08.04.2017 19:14

a8 - id в input

рони	08.04.2017 19:15

Andree007,

$(function() {
    $('input').on('input click', function() {
        var a1, a2, a3, a4, a5, a6, a7, z;
        a1 = $("#a1").val() * 7.5;
        a2 = 32 * $("#a2").val();
        a3 = 2 * $("#a3").val();
        a4 = 230 * $("#a4").val();
        a5 = 30 * $("#a5").val();
        a6 = 15 * $("#a6").val();
        a7 = 36 * $("#a7").val();
        z = a1 + a2 + a3 + a4 + a5 + a6 + a7;
        if ($('#a8').prop('checked')) z *= 1.2;
        $('#rezz').html(z.toFixed(2));
    });

});

Andree007

08.04.2017 19:15

ого только заметил знак # не поставил ....ну все равно
не работает

laimas

08.04.2017 19:18

Andree007,
Перенесите значения 7.5, 32, ... в атрибуты полей, и по событию обрабатывайте их коллекцию проходом в цикле, без повторения портянок

a1 = $("#a1").val() * 7.5;

и кучи переменных.

Andree007

08.04.2017 19:19

оу ..... спасибо большое все работает ))))) интересное решение, если можно как профану объяснить почему z *=1.2

Andree007

08.04.2017 19:21

Цитата:

Сообщение от laimas (Сообщение 449603)

можно по подробней не совсем вас понял

рони	08.04.2017 19:29

Цитата:

Сообщение от Andree007

почему z *=1.2

120%

(z/100)*120 == z*1.2

laimas

08.04.2017 19:31

Константы, на которые производится умножение, можно содержать в атрибутах самих полей. Во-первых не потребуется менять скрипт, если они вдруг изменяться, а во вторых вот такого

a1=$("#a1").val()*7.5;
a2=32 *$("#a2").val();
a3=2 *$("#a3").val();
a4=230 *$("#a4").val();
a5=30 *$("#a5").val();
a6=15 *$("#a6").val();
a7=36 *$("#a7").val();

совсем не нежно будет, как и кучи переменных a1,a2,a3,a4,a5,a6,a7.

По событию ввода получайте коллекцию полей ввода и проходом в цикле получайте значение текущего поля, константу из атрибута, умножаем и т.д.

Andree007

08.04.2017 19:33

спасибо !! большое все доступно ))) извините что много глупых вопросов , только начал постигаю азы ))) не сразу понял что это выражение процентов ))

Andree007

08.04.2017 19:44

Цитата:

Сообщение от laimas (Сообщение 449610)

то есть если я правильно понял мы прописываем умножения на число непосредственно в input а в script уже через идинтификатор производим все действия

laimas

08.04.2017 20:03

Цитата:

Сообщение от Andree007

мы прописываем умножения на число непосредственно в input а в script уже через идинтификатор производим все действия

И да, и нет. Множители прописываем в поля, а вот id совсем не нужны.

Всю шелуху типа border="2" cellpadding="0" cellspacing="0" height="200" width="650" id="" и valign="top" width="180" удалить, лучше это задать через CSS. Поля, это чисто поле, тип его, множитель, значение по умолчанию 0 можно и не использовать.

<input data-factor="7.5" type="number">

Если уж потребуется какая-то индивидуальность, то имя класса еще. Все, не стоит перегружать код лишним.

По событию выбрать только те поля формы (коллекцию полей) у которых есть установленное значение (смотрите filter() в JQ, но можно и без фильтра с проверкой или нулем по умолчанию) и флажки, которые выбраны. Обходим это набор в цикле, умножая data('factor') на значения поля, суммируя. Попробуйте самостоятельно, не получится, тогда уже с проблемами сюда.

Andree007

08.04.2017 22:25

Цитата:

Сообщение от laimas (Сообщение 449619)

согласен нужно сокращать код )) про стили в отдельный фаил это верно , просто это черновик эксперементальный ...

а вот на счет сокращений скрипта не совсем разобрался попробовал вписать в input data-factor ... но не инициализировалось значение , если можно хотелось бы посмотреть на любой подобный вид кода )

чтобы разложить все по полочкам уже у себя в коде

laimas

08.04.2017 22:48

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> 
$(function() {
    $('input').on('input', function() {
        alert(this.getAttribute('data-factor')*this.value)
        //в JQ значение можителя будет доступно как $(this).data('factor')
    })
});
</script> 
</head>
<body>
<input data-factor="7.5" type="number">
</body>
</html>

Andree007

09.04.2017 21:44

не пойму что не так ??? ешил просить код

$('document').ready(function(){

  $(function() {
    $('input').on('input', function() {
   (this.getAttribute('data-factor')*this.value);
   var a1,a2,a3,a4,a5,a6,a7
      a1=$('a1')
      a2=$('a2')
      a3=$('a3')
      a4=$('a4')
      a5=$('a5')
      a6=$('a6')
      a7=$('a7')

var arr = (a1,a2,a3,a4,a5,a6,a7);
function arraySum(array){
var z = 0;
for(var i = 0; i < array.length; i++){
    z += array[i];
    }
}

        if ($('#a8').prop('checked')) z *= 1.2;
         if ($('#a9').prop('checked')) z *= 1.3;
         if ($('#a10').prop('checked')) z += 800;
        $('#rezz').html(z.toFixed(2)+' Рублей');
    });

});
});

Andree007

09.04.2017 21:45

сори опечатка *(решил упростить код ):D

рони	10.04.2017 00:00

Andree007,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    $("input").on("input click", function() {
        var items = document.querySelectorAll('[type="number"][data-factor]');
        var z = [].reduce.call(items, function(sum, el) {
            var num = +el.value || 0,
                factor = +el.dataset.factor || 0;
            return sum + num * factor
        }, 0);
        items = document.querySelectorAll('[type="checkbox"]');
        z = [].reduce.call(items, function(sum, el) {
            var up = +el.dataset.up || 0,
                factor = +el.dataset.factor || 0;
            return !el.checked ? sum : up ? sum + up : sum + z * factor
        }, z);
        $("#rezz").html(z.toFixed(2) + " Рублей")
    })
});
  </script>
</head>

<body>
<form method=post id="myform">
<table border="2" cellpadding="0" cellspacing="0" height="200" width="650" id="" >
<tbody>
<tr>
  <td valign="top" width="180">Сварка </td>
     <td valign="top" width="80">7,5 р / см</td>
     <td valign="top" width=""><input data-factor="7.5" type="number"></td>
</tr>
<tr>
  <td valign="top" width="180">Рез, зачистка реза, сборка</td>
     <td valign="top" width="80">32 р / шт</td>
     <td valign="top" width="80"><input data-factor="32" type="number"></td>
</tr>
<tr>
  <td valign="top" width="180">Зачистка шва</td>
     <td valign="top" width="80">2 р / см</td>
     <td valign="top" width="80"><input data-factor="2" type="number"></td>
</tr>
<tr>
  <td valign="top" width="180">Покраска, обезжиривание, грунт (лист)</td>
     <td valign="top" width="80">230 р / м.кв</td>
     <td valign="top" width="80"><input data-factor="230" type="number"></td>
</tr>
<tr>
  <td valign="top" width="180">Покраска, обезжиривание, грунт (профиль)</td>
     <td valign="top" width="80">30 р  /м.п</td>
     <td valign="top" width="80"><input data-factor="30" type="number"></td>
</tr>
<tr>
  <td valign="top" width="180">Шпаклевка шва</td>
     <td valign="top" width="80">15 р / шт</td>
     <td valign="top" width="80"><input data-factor="15" type="number"></td>
</tr>
<tr>
  <td valign="top" width="180">Шлифовка шва </td>
     <td valign="top" width="80">36 р / шт</td>
     <td valign="top" width="80"><input data-factor="36" type="number"></td>
</tr>
<tr>
  <td valign="top" width="180">Монтаж на объекте</td>
     <td valign="top" width="80">20%</td>
     <td valign="top" width="80"><input type="checkbox" data-factor=".2"></td>
</tr>
<tr>
  <td valign="top" width="180">Дизайн</td>
     <td valign="top" width="80">30%</td>
     <td valign="top" width="80"><input type="checkbox" data-factor=".3"></td>
</tr>
<tr>
  <td valign="top" width="180">Выезд замерщика</td>
     <td valign="top" width="80">800р </td>
     <td valign="top" width="80"><input type="checkbox" data-up="800"></td>
</tr>
<tr>
  <td valign="top" width="280"><div id="rezz">итог</div></td>

  <td valign="top" width="50"></td>
</tr>

</tbody>
</table>
 </form>

</body>
</html>

laimas

10.04.2017 02:47

Andree007,
не понятно зачем писать итог в ячейку с текстом "итог", а если для итога поле name="r", то это вообще профанация, это остальные поля должны иметь имена, сервер сам должен считать итог на основе выбора, все что на клиенте только для клиента.

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> 
$(function() {
    $('form').on('input submit', function(e) {
        e.preventDefault();
        var v = a = 0, p = 1, r = $('#r').empty();
        //основные поля
        $.each($(this.elements).slice(0, -4), function() {
            if($.trim(this.value))  v += this.getAttribute('factor') * this.value 
        });
        //есть выбор, отправка формы
        if(v) {
            $.each($(this).find('input:checked'), function() {
                this.value > 1 ? a = +this.value : p += +this.value 
            });
            r.text((v * p + a).toFixed(2))
        } else if(e.type=='submit') {
            //нет выбора основных полей
            alert('Нет выбора')
        }         
    })
});
</script> 
</head>
<body>
<form method="post" id="myform" autocomplete="off">
<table>
<tbody>
<tr>
       <td>Сварка </td>
       <td>7,5 р / см</td>
       <td><input factor="7.5" type="number" min="0"/></td>
</tr>
<tr>
       <td>Рез, зачистка реза, сборка</td>
       <td>32 р / шт</td> 
       <td><input factor="32" type="number" min="0"/></td>
<tr>
       <td>Зачистка шва</td>
       <td>2 р / см</td>
       <td><input factor="2" type="number" min="0"/></td>
</tr>
<tr>
       <td>Покраска, обезжиривание, грунт (лист)</td>
       <td>230 р / м.кв</td>
       <td><input factor="230" type="number" min="0"/></td>
</tr>
<tr>
       <td>Покраска, обезжиривание, грунт (профиль)</td>
       <td>30 р  /м.п</td>
       <td><input factor="30" type="number" min="0"/></td>
</tr>
<tr>
       <td>шпаклевка шва</td>
       <td>15 р / шт</td>
       <td><input factor="15" type="number" min="0"/></td>
</tr>
<tr>
       <td>шлифовка шва </td>
       <td>36 р / шт</td>
       <td><input factor="36" type="number" min="0"/></td>     
</tr>
<tr>
       <td>Монтаж на объекте</td>
       <td>20%</td>
       <td><input value="0.2" type="checkbox"></td>
</tr>
<tr>
       <td>Дизайн</td>
       <td>30%</td>
       <td><input value="0.3" type="checkbox"></td>
</tr>
<tr>
       <td>Выезд замерщика</td>
       <td>800р </td>
       <td><input value="800" type="checkbox"></td>
</tr>
<tr>
       <td>Итого</td>
       <td id="r"></td>
</tr>
</tbody>
</table>
<button>Отправить</button>
 </form>
</body>
</html>

Andree007

10.04.2017 11:54

спасибо большое !! буду еще читать изучать приемы , ну смысл потихоньку улавливаю ! учту ваши справедливые замечание ! спасибо большое !!

Часовой пояс GMT +3, время: 16:51.