特定のフォームの入力値を合計し、結果を表示します

Question

マイページはいくつかのフォームで構成され、いくつかの入力は "values []"と呼ばれます。 フォームのいずれかでこれらの入力を変更するときは、値を合計し、結果を同じフォームの「合計」という別の入力に表示したいと思います。

私のhtmlコードは以下のようになります。

<form action="index.php" method="post" id="form_1"> 
    <input type="text" name="values[]" id="value_1_1" onkeyup="sum_values(this)" /> 
    <input type="text" name="values[]" id="value_1_2" onkeyup="sum_values(this)" /> 
    [... More inputs with the name "values[]" ] 
    <input type="text" name="total" disabled> 
</form> 

<form action="index.php" method="post" id="form_2"> 
    <input type="text" name="values[]" id="value_2_1" onkeyup="sum_values(this)" /> 
    <input type="text" name="values[]" id="value_2_2" onkeyup="sum_values(this)" /> 
    [... More inputs with the name "values[]" ] 
    <input type="text" name="total" disabled> 
</form> 

と私のjavascriptは次のとおりです。

<script type="text/javascript"> 
function sum_values(x){ 
    var arr = document.getElementById(x.form.id).elements['values[]']; 
    var tot=0; 
    for(var i=0;i<arr.length;i++) 
    { 
     if(parseInt(arr[i].value)) 
      tot += parseInt(arr[i].value); 
    } 
    document.getElementById(x.form.id).elements['total'].value = tot; 
} 
</script> 

私は最終的に最初のフォームの作業を見て非常に満足していたが、私は2番目のことを考え出しました1つはなかった...

私はなぜ理解するのを助けることができますか？ 私はjavascriptの初心者です。私が見つけたコードを手配しようとしました。 ありがとうございました

Answer 1

特定のフォーム内のすべての要素を取得する場合は、次のようなコードを使用できます。残りのコードは、最終結果入力セレクタを除いて正常に動作します。

var formId = 'form1'; 
 
var arr = document.querySelectorAll('#' + formId + ' [name="values[]"]'); 
 

 
var tot=0; 
 
for(var i=0; i<arr.length; i++) { 
 
    if(parseInt(arr[i].value)) 
 
    tot += parseInt(arr[i].value); 
 
} 
 
document.querySelector('#' + formId + ' [name="total"]').value = tot;

<form id="form1"> 
 
    <input type="text" name="values[]" value="5" /> 
 
    <input type="text" name="values[]" value="1" /> 
 
    <input type="text" name="values[]" value="6" /> 
 
    <input type="text" name="values[]" value="8" /> 
 
    <input type="text" name="values[]" value="2" /> 
 
    <input type="text" name="values[]" value="0" /> 
 
    <input type="text" name="values[]" value="1" /> 
 
    <input type="text" name="values[]" value="3" /> 
 
    <input type="text" name="total" disabled> 
 
</form>