查詢將兩個輸入字段加在一起

我有以下代碼。我想添加兩個輸入字段並將其輸出到頁面。我只要能夠輸出什麼是輸入字段類型，但我不知道如何將兩個字段添加到一起並輸出它。我在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>

來源

2012-02-19 Cool Guy Yo

'無功總= firstInput + firstInput1;'是不是要去工作。這些變量是本地的。 – elclanrs 2012-02-19 00:29:49

您發佈不工作的一對夫婦的原因

在keyUp分配新的代碼值爲firstInput和firstInput1，它們是callbac本地的ķ
總價值這些回調外計算，因此不能夠訪問這些當地人（值幾乎肯定是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/

來源

2012-02-19 00:28:14 JaredPar

+1 - 請不要忘記檢查輸入值是否實際爲數字，如果不是，則顯示相應的消息。 – Timeout 2012-02-19 00:32:33

@ b1naryj良好的通話，更新 – JaredPar 2012-02-19 00:36:34

什麼是firstinput和firstinput1在小提琴中？你沒有引用他們，但他們仍然如何在小提琴中工作？ – 2016-10-02 06:05:20

我做了上述回答稍加修改，這裏是最後的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/

來源

2013-11-30 11:11:34 awsmketchup

查詢將兩個輸入字段加在一起

回答

相關問題