Сложить один input c другим input

@koolm · Регистрация: 29.01.2015

Студворк — интернет-сервис помощи студентам

Господа, выручайте. Уже сутки сижу, ни как не могу закончить.

Есть 2 input, значения первого input id="itogsale", зависит от выбранного radio, а значение второго input id="itogaddserv", зависит от выбранных чекбоксов. Тут все гуд, все складывается, вычитается, как мне и надо.

Но мне нужно что бы <input id="itogsale"> + <input id="itogaddserv"> = <input id="itog">.
Причем делалось это автоматом, когда переключается хоть один radio или один чекбоксик.

Пробовал с помощью функции oninput, но что то не получается. Там в самом низу кода видно, что я пытался сделать.
Кидаться массами не стоит, т.к я зеленый и плотненько подсел на js 2 дня назад, до этого редко сталкивался, по этому я слабо разбираю jquery от чисто Js. Ну это так, к слову)

На спасибо тыкну всем, даже если не поможете. Но надеюсь чудо свершится)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form>
 
    <input type="radio" name="sale" class="s1" value="Предоплата 100% (Скидка 10%)" checked=""> Предоплата 100% (Скидка 10%)
    <br>
    <input type="radio" name="sale" class="s2" value="Предоплата 50% (Скидка 5%)">  Предоплата 50% (Скидка 5%)
    <br>
    <input type="radio" name="sale" class="s3" value="Предоплата 30% (Скидка 0%)">  Предоплата 30% (Скидка 0%)
 
    <br>
    <br>
 
    <input type="checkbox" name="n1" class="ck1" value="Подарочная обертка + 100 Руб." id="n1" /> Подарочная обертка + 100 Руб.
    <br>
    <input type="checkbox" name="n2"  class="ck2" value="Рамка (А4,A3) + 300 Руб." id="n2" /> Рамка (А4,A3) + 300 Руб
    <br>
    <input type="checkbox" name="n3"  class="ck3" value="Рамка (А2,A1) + 500 Руб" id="n3" /> Рамка (А4,A3) + 500 Руб
 
    <br>
    <br>
    
    <input type="text" name="" class="summa" id="itogsale"  value="900">
    <input type="text" name="" class="summa" id="itogaddserv"  value="0">
    <input type="text" name=""  id="itog"  value="0">
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
$(document).ready(function (){
 
    $(".s1").click(function (){
 
                var sum=Math.round(1000*10/100); 
                var sumResult = 1000-sum;
                document.getElementById('itogsale').value = sumResult;
    })
 
    $(".s2").click(function (){
                var sum=Math.round(1000*5/100); 
                var sumResult = 1000-sum;
                document.getElementById('itogsale').value = sumResult;
    })
 
    $(".s3").click(function (){
                var sum = 0;
                var sumResult = 1000-sum;
                document.getElementById('itogsale').value = sumResult;
    })
 
 
    $(".ck1").click(function (){
 
        if ($('#n1').prop('checked')){
            var checkedone = document.getElementById('itogaddserv').value;
            var sum = 100;
            var sumResult = +checkedone + +sum;
            document.getElementById('itogaddserv').value = sumResult; 
 
        }else{
            var checkedone = document.getElementById('itogaddserv').value;
            var sum = 100;
            var sumResult = +checkedone - +sum;
            document.getElementById('itogaddserv').value = sumResult; 
        }
 
    })
 
    $(".ck2").click(function (){
 
        if ($('#n2').prop('checked')){
            var checkedone = document.getElementById('itogaddserv').value;
            var sum = 300;
            var sumResult = +checkedone + +sum;
            document.getElementById('itogaddserv').value = sumResult; 
 
        }else{
            var checkedone = document.getElementById('itogaddserv').value;
            var sum = 300;
            var sumResult = +checkedone - +sum;
            document.getElementById('itogaddserv').value = sumResult; 
        }
 
    })
 
    $(".ck3").click(function (){
 
        if ($('#n3').prop('checked')){
            var checkedone = document.getElementById('itogaddserv').value;
            var sum = 500;
            var sumResult = +checkedone + +sum;
            document.getElementById('itogaddserv').value = sumResult; 
 
        }else{
            var checkedone = document.getElementById('itogaddserv').value;
            var sum = 500;
            var sumResult = +checkedone - +sum;
            document.getElementById('itogaddserv').value = sumResult; 
        }
 
    })
 
})
//Вот здесь ниже, надо дописать что то, что сложит два значения из 2 input в 3 инпут.  
 
var isale = document.getElementById('itogsale').value;
var iserv = document.getElementById('itogaddserv').value;
 
  isale.oninput = function() {
    var itogprice = +isale + +iserv;
    document.getElementById('itog').value = itogprice ;
  };
 
  iserv.oninput = function() {
    var itogprice = +isale + +iserv;
    document.getElementById('itog').value = itogprice ;
  };

Добавлено через 16 часов 53 минуты
Ни кто не умеет что ли?

@Уф · 16.02.2017, 09:55

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

JavaScript
1
2
3
4
5
6
  $('#itosale, #itogaddserv').keyup(function() {
    var isale =$('#itosale').val(),
         iserv = $('#itogaddserv').val(),
         itogprice = parseFloat(isale) + parseFloat(iserv);
    $('#itog').val(itogprice);
  });

конечно еще интересно зачем использовать чистый js в перемешку с jquery, прям лапша получается

хотя может это дело вкуса

Добавлено через 8 минут
еще бы добавить проверку если в инпуте пусто, можно так

JavaScript
1
itogprice = parseFloat(isale || 0) + parseFloat(iserv || 0);

@j2FunOnly · 16.02.2017, 10:42

koolm, можно добавить к радиокнопкам и чекбоксам класс, чтобы можно было к ним обратиться, а не писать для каждого элемента обработчик. И необходимые данные для вычисления брать из значения value этих полей.

В данном конкретном случае суммирование значений итоговых полей можно вынести в функцию и вызывать её при изменении выбора пользователем. Как я понял начальная цена фиксированная. Можно сделать например так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<form>
  <label>
    <input type="radio" name="sale" class="s1 sale" value="10" checked>
    Предоплата 100% (Скидка 10%)
  </label><br>
  <label>
    <input type="radio" name="sale" class="s2 sale" value="5">
    Предоплата 50% (Скидка 5%)
  </label><br>
  <label>
    <input type="radio" name="sale" class="s3 sale" value="0">
    Предоплата 30% (Скидка 0%)
  </label>
  <br><br>
  <label>
    <input type="checkbox" name="n1" class="ck1 adds" value="100" id="n1">
    Подарочная обертка + 100 Руб.
  </label><br>
  <label>
    <input type="checkbox" name="n2" class="ck2 adds" value="300" id="n2">
    Рамка (А4,A3) + 300 Руб
  </label><br>
  <label>
    <input type="checkbox" name="n3"  class="ck3 adds" value="500" id="n3">
    Рамка (А4,A3) + 500 Руб
  </label>
  <br><br>
 
  <input type="text" name="" class="summa" id="itogsale" value="900">
  <input type="text" name="" class="summa" id="itogaddserv" value="0">
  <input type="text" name=""  id="itog"  value="0">
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(function () {
  var $itogsale = $('#itogsale');
  var $itogaddserv = $('#itogaddserv');
  var $itog = $('#itog');
  var $sale = $('.sale');
  var $adds = $('.adds');
 
  var price = 1000;
  var calculate = function () {
    $itog.val(parseInt($itogsale.val()) + parseInt($itogaddserv.val()));
  }
 
  $sale.change(function () {
    var sale = (100 - parseInt($sale.filter(':checked').val())) / 100;
    $itogsale.val(price * sale);
    calculate();
  });
 
  $adds.change(function () {
    var sum = 0;
    $adds.each(function () {
      if(this.checked) sum += parseInt(this.value);
    });
    $itogaddserv.val(sum);
    calculate();
  });
});

https://jsfiddle.net/ffyrzd5b/

Можно вообще избавиться от промежуточных inputов, показывать только итоговую сумму.

Новые блоги и статьи Все статьи Все блоги /
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .
wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .

Сложить один input c другим input

Решение