前提・実現したいこと

javascriptについての質問です。
テーブル内の表計算を繰り返し処理や配列などを用いて簡潔に記述したいです。
テーブル１の処理は
単価(手入力)→ラジオボックス選択で掛け算(片道value=1,往復value=2)→合計値
テーブル2の処理は
単価(手入力)→選択リスト選択で掛け算(0～10)→合計値
→テーブル1と2の合計値
という手順でプログラムを実行したいです。
また、jQueryなどのプラグインは使わないで行いたいです。

発生している問題・エラーメッセージ

function multiply() {
    var element = document.getElementById( "form" );
    var radioNodeList = element.which;
    var a = radioNodeList.value;
    var price = document.getElementsByName("price");
    for (var i = 0; i < price.length; i++) {
    if (price[i].value == "") {
}
}
}

該当のソースコード

<body>
<form id="form" action="php-training-2-output.php" method="post">
<table>
<tr>
<th>単価</th>
<th>利用区分</th>
<th>合計</th>
</tr>
<tr>
<td><input class="disable" maxlength='6' type="text" name="price"></td>
<td><label><input type="radio" name="which" onChange="multiply()" value=1 checked>片道
<input type="radio" name="which" onChange="multiply()" value=2>往復</label></td>
<td><input class="disable" maxlength='7' type="text" name="field"></td>
</tr>
<tr>
<td><input class="disable" maxlength='6' type="text" name="price"></td>
<td><label><input type="radio" name="which" onChange="multiply()" value=1 checked>片道
<input type="radio" name="which" onChange="multiply()" value=2>往復</label></td>
<td><input class="disable" maxlength='7' type="text" name="field"></td>
</tr>
<tr>
<td><input class="disable" maxlength='6' type="text" name="price"></td>
<td><label><input type="radio" name="which" onChange="multiply()" value=1 checked>片道
<input type="radio" name="which" onChange="multiply()" value=2>往復</label></td>
<td><input class="disable" maxlength='7' type="text" name="field"></td>
</tr>
<tr>
<td align="right" colspan="3">合計</td>
<td><input type="text" id="field_total" value="0"></td>
</tr>
</table>
<table>
<tr>
<th>単価</th>
<th>数量</th>
<th>合計</th>
</tr>
<tr>
<td><input class="disable" maxlength='6' type="text" name="price"></td>
<td class="left">
<select name="price">
<?php
$price=[0,1,2,3,4,5,6,7,8,9,10];
foreach($price as $item) {
echo '<option value="', $item ,'">', $item ,'</option>';}
?>   
</select></td>
<td><input class="disable" maxlength='7' type="text" name="field"></td>
</tr>
<tr>
<td><input class="disable" maxlength='6' type="text" name="price"></td>
<td class="left">
<select name="price">
<?php
$price=[0,1,2,3,4,5,6,7,8,9,10];
foreach($price as $item) {
echo '<option value="', $item ,'">', $item ,'</option>';}
?>   
</select></td>
<td><input class="disable" maxlength='7' type="text" name="field"></td>
</tr>
<tr>
<td><input class="disable" maxlength='6' type="text" name="price"></td>
<td class="left">
<select name="price">
<?php
$price=[0,1,2,3,4,5,6,7,8,9,10];
foreach($price as $item) {
echo '<option value="', $item ,'">', $item ,'</option>';}
?>   
</select></td>
<td><input class="disable" maxlength='7' type="text" name="field"></td>
</tr>
<tr>
<td align="right" colspan="3">合計</td>
<td><input type="text" id="field_total" value="0"></td>
</tr>
</table>
<label>総合計</label>
<input type="text" name="allTotal">
</body>

試したこと

javascript初心者のためどういった記述をすればいいのか全くわかりません。
一応上記のような記述をしてみてデバッカーで確認して、
値は取れているような気はするのですが、繰り返した処理をどうやって各テーブルの行
ごとに値を割り当て、各行の合計値に算出するのかわかりません。
また、ラジオボックスも行ごとに選択したいのですが、二行目のラジオボックスを選択すると
一行目のラジオボックスが未選択状態になるなどわからないことだらけです。
どうか解決方法をご教示お願い致します。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

og24715

2018/05/16 17:39

PHPではなくてHTMLのコードの方が回答者に親切です。インデントもついてると尚良いと思います。

m.ts10806

2018/05/16 21:01

質問編集画面の質問タイトル横にある初心者アイコンをご活用ください。質問一覧にも表示されるため、質問内に書くよりも明示的です。

akkie-1234

2018/05/17 04:50

ご指摘ありがとうございます。以後、気を付けて後程修正させていただきたいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

まずhtmlのnameの付け方から考え直したほうがよいでしょう
radioボタンのnameが競合してただしく選択できません

priceとfieldを多用していますが、
たとえば各要素にidをふるなどもう少し工夫が必要かと

sample

最大限元のHTMLを優先してみました

javascript
1<script>
2document.addEventListener('change',function(e){
3  var p=document.querySelectorAll('input[name=price]');
4  var f=document.querySelectorAll('input[name=field]');
5  var w=document.querySelectorAll('input[type=radio].which:checked');
6  var c=document.querySelectorAll('select[name=count]');
7  var t=document.querySelectorAll('input[name=field_total]');
8  var ta=document.querySelector('input[name=allTotal]');
9  var t0=0,t1=0;
10  var v=0;
11  for(var i=0;i<3;i++){
12    t0+=(v=parseInt(p[i].value)||0*parseInt(w[i].value||0));
13    f[i].value=p[i].value==""?"":v;
14    t1+=(v=parseInt(p[i+3].value||0)*parseInt(c[i].value||0));
15    f[i+3].value=p[i+3].value==""?"":v;
16  }
17  t[0].value=t0;
18  t[1].value=t1;
19  ta.value=t0+t1;
20});
21</script>
22<form id="form">
23<table>
24<tr>
25<th>単価</th>
26<th>利用区分</th>
27<th>合計</th>
28</tr>
29<tr>
30<td><input maxlength='6' type="text" name="price"></td>
31<td><label><input type="radio" class="which" name="which_1" value="1" checked>片道
32<input type="radio" class="which" name="which_1" value="2">往復</label></td>
33<td><input maxlength='7' type="text" name="field"></td>
34</tr>
35<tr>
36<td><input maxlength='6' type="text" name="price"></td>
37<td><label><input type="radio" class="which" name="which_2" value="1" checked>片道
38<input type="radio" class="which" name="which_2" value="2">往復</label></td>
39<td><input maxlength='7' type="text" name="field"></td>
40</tr>
41<tr>
42<td><input maxlength='6' type="text" name="price"></td>
43<td><label><input type="radio" class="which" name="which_3" value="1" checked>片道
44<input type="radio" class="which" name="which_3" value="2">往復</label></td>
45<td><input maxlength='7' type="text" name="field"></td>
46</tr>
47<tr>
48<td align="right" colspan="3">合計</td>
49<td><input type="text" name="field_total" value="0"></td>
50</tr>
51</table>
52<table>
53<tr>
54<th>単価</th>
55<th>数量</th>
56<th>合計</th>
57</tr>
58<tr>
59<td><input maxlength='6' type="text" name="price"></td>
60<td class="left">
61<select name="count">
62<?php
63$price=[0,1,2,3,4,5,6,7,8,9,10];
64foreach($price as $item) {
65echo '<option value="', $item ,'">', $item ,'</option>';}
66?>   
67</select></td>
68<td><input maxlength='7' type="text" name="field"></td>
69</tr>
70<tr>
71<td><input maxlength='6' type="text" name="price"></td>
72<td class="left">
73<select name="count">
74<?php
75$price=[0,1,2,3,4,5,6,7,8,9,10];
76foreach($price as $item) {
77echo '<option value="', $item ,'">', $item ,'</option>';}
78?>   
79</select></td>
80<td><input maxlength='7' type="text" name="field"></td>
81</tr>
82<tr>
83<td><input maxlength='6' type="text" name="price"></td>
84<td class="left">
85<select name="count">
86<?php
87$price=[0,1,2,3,4,5,6,7,8,9,10];
88foreach($price as $item) {
89echo '<option value="', $item ,'">', $item ,'</option>';}
90?>   
91</select></td>
92<td><input maxlength='7' type="text" name="field"></td>
93</tr>
94<tr>
95<td align="right" colspan="3">合計</td>
96<td><input type="text" name="field_total" value="0"></td>
97</tr>
98</table>
99<label>総合計</label>
100<input type="text" name="allTotal">
101</body>

投稿2018/05/17 01:00

編集2018/05/17 05:33

yambejp

総合スコア114769

akkie-1234

2018/05/17 04:48

ご回答ありがとうございます。 priceなどのnameに工夫が必要とアドバイスいただきましたが、例えば、price1,price2などのように横に数字でナンバーを付けたとして各々違うnameになってしまいますが、そこからの繰り返し処理での出力は可能なのでしょうか？すごいレベル低い質問で申し訳ないのですが、そこら辺をどういうふうに改善すればいいかアドバイスいただけないでしょうか？