запрос добавить два поля ввода вместе - PullRequest
Новая
       19

запрос добавить два поля ввода вместе

2 голосов
/ 19 февраля 2012

У меня есть следующий код. Я хочу добавить два поля ввода вместе и вывести его на страницу. Я дошел до того, что смог вывести тип в поле ввода, однако я не могу понять, как сложить два поля вместе и вывести его. У меня это в http://jsfiddle.net/erick/9Dj3j/3/

Jquery 

$(function() {
    var output_element = $('#output_ele');
    var output_element1 = $('#output_ele1');

    $('#the_input_id').keyup(function() {  
        var their_input = $(this).val();
        var firstInput = output_element.text(their_input);


    });
     $('#the_input_id1').keyup(function() {  
        var their_input1 = $(this).val();
        var firstInput1 = output_element1.text(their_input1);


    });

    var output_total = $('#total');

    var total = firstInput + firstInput1;

   output_total.text(total);

 });

HTML 

<form method="post">
    <input type="text" id="the_input_id">
    <input type="text" id="the_input_id1">
</form>
<div id="output_ele">

</div>
<div id="output_ele1">

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

</div>​​​​​​​​​​​​​​​

Ответы [ 2 ]

7 голосов
/ 19 февраля 2012

Код, который вы разместили, не работает по нескольким причинам

  • При keyUp вы присваиваете новые значения firstInput и firstInput1, которые являются локальными для обратного вызова
  • Общая стоимость рассчитывается вне этих обратных вызовов и, следовательно, не имеет доступа к этим локальным (значения почти наверняка undefined)
  • Сумма рассчитывается только один раз при запуске, а не один раз за клик

Вам нужно написать функцию, которая складывает два значения вместе и вызывает ее из обработчика keyUp 

$('#the_input_id').keyup(function() {  
    updateTotal();
});

$('#the_input_id1').keyup(function() {  
    updateTotal();
});

var updateTotal = function () {
  var input1 = parseInt($('#the_input_id').val());
  var input2 = parseInt($('#the_input_id1').val());
  if (isNaN(input1) || isNaN(input2)) {
    $('#total').text('Both inputs must be numbers');
  } else {          
    $('#total').text(input1 + input2);
  }
};

Скрипка: http://jsfiddle.net/9Dj3j/56/

2 голосов
/ 30 ноября 2013

Я внес небольшую модификацию в ответ выше, и вот заключительный javascript: 

$(function() {

$('#the_input_id, #the_input_id1').keyup(function(){
   updateTotal(); 
});

var updateTotal = function () {
  var input1 = parseInt($('#the_input_id').val());
  var input2 = parseInt($('#the_input_id1').val());
  if (isNaN(input1) || isNaN(input2)) {
      if(!input2){
          $('#total').val($('#the_input_id').val());
      }

      if(!input1){
            $('#total').val($('#the_input_id1').val());
      }

  } else {          
        $('#total').val(input1 + input2);
  }
};

var output_total = $('#total');

var total = input1 + input2;

output_total.val(total);

});

Скрипка: http://jsfiddle.net/9Dj3j/259/

...