如何在隱藏字段的javascript中獲得數字的總和？

我有一些動態輸入隱藏字段類「absclass」。我有這些字段中的數字和字符。我想要得到JavaScript中的唯一數字的總和。我寫下如下，這是
無法正常工作。如何在隱藏字段的javascript中獲得數字的總和？

$(document).ready(function() { 
     $('#btn').live('click', function(e) { 
      e.preventDefault(); 
      var sum = 0; 
      $('.absclass').each(function() { 
       sum += Number($(this).val()); 
      }); 
      $("#sum").html(sum); 
     });        
    });

請告訴我爲什麼它不起作用？

編輯：HTML代碼

<td><input type="hidden" class="absclass" id="txtsp<?php echo $p; ?>" value=""/></td>

下面

是script.In這個按鈕點擊我傳遞值隱藏字段，也
得到他們的總和simultaneously.So傳遞給字段僅值但是當我去

第二次點擊，然後總結來。

 <script> 
    var arr = new Array(); 
    $(document).ready(function() { 
     $('#btn').on('click', function(e) { 
      e.preventDefault(); 
      var txt1 = $('#txt1').val(); 
      var txt2 = $('#txt2').val(); 
      var txt3 = $('#txt3').val(); 
      var txt4 = $('#txt4').val(); 
      var txt5 = $('#txt5').val(); 
      var txt6 = $('#txt6').val(); 
      var textbox1 = $('#textbox1').val(); 
      var textbox2 = $('#textbox2').val(); 
      var textbox3 = $('#textbox3').val(); 
      var textbox4 = $('#textbox4').val(); 
      var textbox5 = $('#textbox5').val(); 
      var textbox6 = $('#textbox6').val(); 
      $.post("matchanswers.php", {"txt1": txt1, "txt2": txt2, "txt3": txt3, "txt4": txt4, "txt5": txt5, "txt6": txt6, "textbox1": textbox1, "textbox2": textbox2, "textbox3": textbox3, "textbox4": textbox4, "textbox5": textbox5, "textbox6": textbox6}, function(data) { 
       var obj = $.parseJSON(data); 
      <?php for ($k = 0; $k < 6; $k++) { ?> 
        $('#txtspan<?php echo $k; ?>').html(obj[<?php echo $k; ?>]); 
        $('#txtsp<?php echo $k; ?>').val(obj[<?php echo $k; ?>]); 
//      $(".hide").css("display", "block"); 
//      $(".answertext").css("display", "none"); 
      <?php } ?> 
      }); 
      var sum = 0; 
      $('.absclass').each(function() { 
       var val = Number($(this).val()); 
       if (!isNaN(val)) { 
        sum += val; 
       } 
      }); 
      $("#sum").html(sum); 
     }); 
      }); 
     </script>

來源

2013-12-12 user1755949

你的意思是不工作？ – thefourtheye

我得到的總和只有0 – user1755949

向我們展示了你的html –

如果每個字段包含一個值（數字加字符，我認爲，你可以使用parseInt函數得到的數值：

$(document).ready(function() { 
     $('#btn').on('click', function(e) { 
      e.preventDefault(); 
    var sum = 0; 
      $('.absclass').each(function() { 
       sum += parseInt($(this).val()); 
      }); 
      $("#sum").html(sum); 
     });        
    });

來源

2013-12-12 10:43:07 Sayed

parseInt也不工作。我試過了 – user1755949

如果我使用parseInt它顯示NaN.For我已經使用isNaN.That也不工作 – user1755949

檢查您的輸入字段在螢火蟲，如果它確實包含任何值？我確定它是空白的，這就是它顯示NaN的原因。 – Sayed

您需要將值解析爲int然後。您可以檢查是否值是一個數字，並把它添加到總結，如果它是（你的每個內部）：

var val = parseInt($(this).val()); 
if(!isNaN(val)){ 
    sum += val; 
}

編輯：在看到您使用$ .post來填充數據後，確保代碼位於此函數的回調中（因爲只有在那裏您才能確保數據已填充，並且您可以開始製作總和）：

$.post("matchanswers.php", {"txt1": txt1, ...}, 
    function(data) { 
     var obj = $.parseJSON(data); 
     <?php for ($k = 0; $k < 6; $k++) { ?> 
      $('#txtspan<?php echo $k; ?>').html(obj[<?php echo $k; ?>]); 
      $('#txtsp<?php echo $k; ?>').val(obj[<?php echo $k; ?>]); 
     <?php } ?> 
     var sum = 0; 
     $('.absclass').each(function() { 
      var val = parseInt($(this).val()); 
      if (!isNaN(val)) { 
       sum += val; 
      } 
     }); 
     $("#sum").html(sum); 
    } 
);

來源

2013-12-12 10:46:34

我得到了問題。實際上同時我將值傳遞給隱藏字段並獲取它們的值的總和。所以第一次它不是第二次，總和即將到來。那麼我能做些什麼呢？ – user1755949

@ user1755949如何將值傳遞給隱藏字段？ – Grundy

在同一個按鈕上點擊jquery – user1755949

這裏是工作提琴：DEMO

<input type="button" id="btn" value="ok"> 
<input type="hidden" class="absclass" value="1"/> 
<input type="hidden" class="absclass" value="2"> 
<input type="hidden" class="absclass" value="3"> 
<div id="sum"></div>

JS：

$(document).ready(function() { 
     $('#btn').live('click', function(e) { 
      e.preventDefault(); 
    var sum = 0; 
      $('.absclass').each(function() { 
        if(!isNaN(parseFloat($(this).val()))) sum += Number($(this).val()); 
      }); 
      $("#sum").html(sum); 
     });        
    });

我你的jQuery版本？由於live()已被棄用

來源

2013-12-12 10:46:38

請參閱OP的評論：jquery版本1.7.1 – Grundy

嘗試這樣的事情

$('#btn').on('click', function(e) { 
     e.preventDefault(); 
     var sum = 0; 
     $('.absclass').each(function() { 
      var num = Number(this.value); 
      if(!isNaN(num)){ 
       sum += num; 
      } 
     }); 
     $("#sum").html(sum); 
    });        
});

來源

2013-12-12 10:47:24

的.live（）方法被棄用（jQuery的1.7）。使用.on（）代替。

<!doctype html> 
<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
</head> 
<body> 
<form> 
<input type="button" value="btn" id="btn"> 
<input type="hidden" value="1" class="absclass"> 
<input type="hidden" value="2" class="absclass"> 
<input type="hidden" value="3" class="absclass"> 
<input type="hidden" value="4" class="absclass"> 
<input type="hidden" value="5" class="absclass">  
</form> 
<div>Total: <span id="sum"></span></div>  
<script> 
$(document).ready(function() { 
    $('#btn').on('click', function(e) { 
     e.preventDefault(); 
     var sum = 0; 
     $('.absclass').each(function() { 
      sum += Number($(this).val()); 
     }); 
     $("#sum").html(sum); 
    });        
});  
</script> 
</body> 
</html>

來源

2013-12-12 10:51:25 cardeol

'不建議使用'不是相同'已刪除'，_version已棄用：1.7，已刪除：1.9_ – Grundy

移動你的

var sum = 0; 
$('.absclass').each(function() { 
    var val = Number($(this).val()); 
    if (!isNaN(val)) { 
     sum += val; 
    } 
}); 
$("#sum").html(sum);

到後回調這樣

$.post("matchanswers.php", {"txt1": txt1, "txt2": txt2, "txt3": txt3, "txt4": txt4, "txt5": txt5, "txt6": txt6, "textbox1": textbox1, "textbox2": textbox2, "textbox3": textbox3, "textbox4": textbox4, "textbox5": textbox5, "textbox6": textbox6}, 
    function(data) { 
     var obj = $.parseJSON(data); 
     for (var k = 1; k < 7; k++) { 
      $('#txtspan'+k).html(obj[k]); 
      $('#txtsp'+k).val(obj[k]); 
     } 
     var sum = 0; 
     $('.absclass').each(function() { 
      var val = Number($(this).val()); 
      if (!isNaN(val)) { 
       sum += val; 
      } 
     }); 
     $("#sum").html(sum); 
    } 
);

在你的代碼

嘗試之前計算的金額從服務器獲取答案，並設值爲你的隱藏字段
也查看更多關於$.post的功能，請發送異步請求

來源

2013-12-12 11:21:05 Grundy

非常感謝..有效：） – user1755949

如何在隱藏字段的javascript中獲得數字的總和？

回答

相關問題