フォームの入力を複数にする

##目的
商品(aが10個の時の送料)がひとつなら送料を計算できるが、複数の商品(aが５個でbが4個の時の送料)を検索できるようにしたい。

例
コカ・コーラという商品が３つの時の送料は計算できます。
コカ・コーラという商品が３つで三ツ矢サイダーが２つの時の送料は計算できません。

現在
フォームを10個くらい作ってそのたびにkeisanする？くらいしか思いつきません。

なんだか上記書き方はスマートではないような気がしますのでオススメの書き方教えてください。
よろしくお願いします。

##こんな感じが理想かな
商品番号（SKU）入力フィールド　・　数量入力フィールド
商品番号（SKU）入力フィールド　・　数量入力フィールド
商品番号（SKU）入力フィールド　・　数量入力フィールド
商品番号（SKU）入力フィールド　・　数量入力フィールド
商品番号（SKU）入力フィールド　・　数量入力フィールド
商品番号（SKU）入力フィールド　・　数量入力フィールド
商品番号（SKU）入力フィールド　・　数量入力フィールド
商品番号（SKU）入力フィールド　・　数量入力フィールド
都道府県入力フィールド

計算ボタン

トータルの送料

##ソース

html
1<!doctype html>
2<html>
3<head>
4<meta charset="shift_jis">
5<title>送料計算</title>
6<script src="jquery-1.10.2.min.js"></script>
7</head>
8<style>
9form{
10	width:auto;
11	background-color:white;
12	border:2px solid black;
13	margin:0 auto;
14	padding:3%;
15	}
16
17.skuf{
18	width:30%;
19	float:left;
20	margin:0 10px;
21	}
22	
23.quantityf{
24	width:30%;
25	float:left;
26	margin:0 10px;
27	}
28	
29.address{
30	width:30%;
31	float:left;
32	margin:0 10px;
33	}
34
35.submit{
36	width:30%;
37	margin:5px;
38	}
39
40h2{
41	font-size:18px;
42	margin-bottom:5px;
43	}
44	
45input{
46	width:100%;
47	padding:8px 0;
48	margin-bottom:1%;
49	}
50
51select{
52	width:100%;
53	padding:8px 0;
54	margin-bottom:1%;
55	}
56
57</style>
58
59<script type="text/javascript">
60
61//CSV読み込んで配列に入れるスクリプト
62//window.onload = function loadcsv(){}
63
64
65
66//送料計算スクリプト
67function keisan(){
68	
69	$.ajax({
70		//読み込むcsv
71		url:'data.csv',
72		//読み込むファイルの形式
73		dataType:'text',
74		async: false,
75		//shift-jisを読み込むため
76		beforeSend: function(myData){myData .overrideMimeType("text/html;charset=Shift_JIS");
77		},//読み込み成功時の行動
78		success: function(data){
79			//改行ごとに区切って
80			var tempArray = data.split("\n");
81			csvArray = new Array();
82			//カンマごとに区切る
83			for(var i = 0; i<tempArray.length;i++){
84    			csvArray[i] = tempArray[i].split(",");
85				}
86		}
87	})	
88	
89	//SKU取得
90	var sku = document.form.sku.value;
91	
92	//数量
93	var qua = document.form.quantity.value;
94	
95	//都道府県
96	var add = document.form.address.value;
97	
98	
99	
100	//重量取得スクリプト
101	var juryo = csvArray.filter(function(item, index){
102		if (item[1] == sku){
103			juryoget = item[2];
104			}
105		});
106	
107	//重量と数量を掛けた物
108	var soryo = juryoget * qua;
109}
110</script>
111<body>
112	<form name="form">
113    	<h1>送料検索フォーム</h1>
114        <!--SKU入力-->
115        <div class="skuf">
116            <h2>商品のSKU</h2>
117            <input type="text" name="sku">
118        </div>
119        <!--数量入力-->
120        <div class="quantityf">
121            <h2>購入する数量</h2>
122            <input type="text" name="quantity">
123        </div>
124        
125        <!--都道府県入力-->
126        <div class="address">
127            <h2>お住まいの都道府県</h2>
128            <select name="address" size="1">
129                <option value="">未選択</option>
130                <option value="1">北海道</option>
131                <option value="2">青森</option>
132                <option value="2">岩手</option>
133                <option value="2">宮城</option>
134                <option value="2">秋田</option>
135                <option value="2">山形</option>
136                <option value="2">福島</option>
137                <option value="3">茨城</option>
138                <option value="3">栃木</option>
139                <option value="3">群馬</option>
140                <option value="3">埼玉</option>
141                <option value="3">千葉</option>
142                <option value="3">東京</option>
143                <option value="3">神奈川</option>
144                <option value="3">新潟</option>
145                <option value="3">富山</option>
146                <option value="3">石川</option>
147                <option value="3">福井</option>
148                <option value="3">山梨</option>
149                <option value="3">長野</option>
150                <option value="3">岐阜</option>
151                <option value="3">静岡</option>
152                <option value="3">愛知</option>
153                <option value="3">三重</option>
154                <option value="4">滋賀</option>
155                <option value="4">京都</option>
156                <option value="4">大阪</option>
157                <option value="4">兵庫</option>
158                <option value="4">奈良</option>
159                <option value="4">和歌山</option>
160                <option value="3">鳥取</option>
161                <option value="3">島根</option>
162                <option value="3">岡山</option>
163                <option value="3">広島</option>
164                <option value="3">山口</option>
165                <option value="3">徳島</option>
166                <option value="3">香川</option>
167                <option value="3">愛媛</option>
168                <option value="3">高知</option>
169                <option value="5">福岡</option>
170                <option value="5">佐賀</option>
171                <option value="5">長崎</option>
172                <option value="5">熊本</option>
173                <option value="5">大分</option>
174                <option value="5">宮崎</option>
175                <option value="5">鹿児島</option>
176                <option value="6">沖縄</option>
177            </select>
178        </div>
179        
180        <!--送信ボタン-->
181        <input type="button" class="submit" value="計算する" onClick="keisan();">
182        
183        <!--結果-->
184        <input type="text" name="result" size="8" value="0"> 
185    </form>
186</body>
187</html>

##csvの中身
商品名,商品コード,商品の重さ
こんな感じのcsvです

ex
コカ・コーラ,co-21,2
ペプシ,pe-21,3

coco_bauer

2018/01/18 03:11

何に困っているのですか？「一つだけの商品なら送料を計算できる」と「複数の商品を検索できるようにしたい」とが、どのように関係しているのか理解できません。

退会済みユーザー

2018/01/18 03:24

目的修正しました。##目的商品(aが10個の時の送料)がひとつなら送料を計算できるが、複数の商品(aが５個でbが4個の時の送料)を検索できるようにしたい。例コカ・コーラという商品が３つの時の送料は計算できます。コカ・コーラという商品が３つで三ツ矢サイダーが２つの時の送料は計算できません。ということです。わかりにくくて済みません！

kei344

2018/01/18 03:27

「検索」ではなく「計算」では？

退会済みユーザー

2018/01/18 03:32

おっしゃる通りです。計算です。間違えました。

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

回答2件

Ajaxは最初の一回だけでいいですよね？
(どうせ保持するならそれさえいらない気もするけどそれはおいておいて)
前回はロード時のみだったのが、どうして変わってしまったのでしょうか？
このスクリプトでは毎回時間かかりそうです。

-- 13:12 コード追記

HTML
1        <table>
2         <tbody>
3          <tr>
4           <th>商品のSKU</th><td><input type="text" name="sku" /></td><td>
5           <th>購入する数量</th><td><input type="text" name="quantity" /></td>
6           <td><input type="text" name="subtotal" size="8" value="0" /></td>
7          </tr>
8          <tr>
9           <th>商品のSKU</th><td><input type="text" name="sku" /></td><td>
10           <th>購入する数量</th><td><input type="text" name="quantity" /></td>
11           <td><input type="text" name="subtotal" size="8" value="0" /></td>
12          </tr>
13          <!-- 以下同様 -->
14         </tbody>
15        </table>

JavaScript
1// csvArrayがある前提。
2    var rows = document.querySelector('form table tbody').rows;
3    var total = 0;
4    for (var i = 0; i < rows.length; i++) {
5        // SKU取得
6        var sku = rows[i].querySelector('[name="sku"]').value;
7
8        // 数量
9        var qua = parseFloat(rows[i].querySelector('[name="quantity"]').value);
10
11        // 重量取得スクリプト
12        var juryoget = -1;
13        var juryo = csvArray.filter(function(item, index){
14            if (item[1] === sku){
15                juryoget = item[2];
16            }
17        });
18
19        // 重量と数量を掛けた物
20        var suryo = juryoget !== -1 ? juryoget * qua : 0;
21        rows[i].querySelector('[name="subtotal"]').value = suryo.toString();
22        total += suryo;
23    }
24
25    document.form.result.value = total.toString();