Сложить один 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ов, показывать только итоговую сумму.

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

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

Решение