javascriptでページ上では計算結果を表示できているのですが、value="○○"の○○部分にも同じ値を表示させたいです。

Question

現在とあるスクールのイベントページを作成しています。

そこで申し込み人数とレンタル品の数を入力すると自動的に合計金額が税込で表示されるようになっています。

これがjavascriptのコードです。

<script>
function price(){
	var tax = 8;

	var price1 = document.form1.goods1.selectedIndex * 15000;
	var price2 = document.form1.goods2.selectedIndex * 4000;
	var total = price1 + price2;

	var tax2 = Math.round((total * tax) / 100);

	var sum = total + tax2;

	document.form1.field_total.value = sum;
}
</script>

これが合計金額が表示される部分のHTMLのコードです。

<tbody>
	<tr>
		<td>15,000円</td>
		<td>
			<select name="goods1" onChange="price()">
				<option>0</option>
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option>6</option>
				<option>7</option>
				<option>8</option>
				<option>9</option>
				<option>10</option>
			</select>
		</td>
		<td>4,000円</td>
		<td>
			<select name="goods2" onChange="price()">
				<option>0</option>
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option>6</option>
				<option>7</option>
				<option>8</option>
				<option>9</option>
				<option>10</option>
			</select>
		</td>
	</tr>
</tbody>
<thead>
	<tr>
		<th class="table-red" colspan="2">合計金額（税込）</th>
		<th class="table-red" colspan="2">申し込み</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td colspan="2">
			<input type="text" id="total" name="field_total" value="0" class="sum"> 円
		</td>
		<td class="entry-area" colspan="2">
			<a href="#" class="table-entry-btn" target="_blank">このプランで申し込む！</a>
		</td>
	</tr>
</tbody>

inputのvalueの数値を合計金額と同じものにその都度変更するようなプログラムにしたいです。
（例えば、お客さんが申し込み人数を1人にした場合、合計金額が15,000円になります。そしたら、value="15000"になるように設定したいです。）
理由は、valueの値を決済フォームに飛ばして処理するからです。

色々調べて試したみたのですが、うまくいきません。

教えていただけるとすごく助かります。。。

よろしくお願いいたします！

Comments

[date]

goods1のselectも質問に入れて置いてもらえませんか、また、field_totalは入力して変えることがあるのですか?

[ShunYoshizawa]

情報を追加いたしました。また、field_totalは入力して変更することはありません。

Answer 1

少しややこしいのですが、「HTML上に書かれているvalue」と、「JavaScriptから設定できるvalue」は、別の値です。

• HTML上のvalue…これはフォーム表示用の初期値で、ユーザー入力で変化しない。JavaScriptからは、defaultValueとして参照可能（むろん、変えてもほぼ意味はない）。
• JavaScriptでのvalue…これはフォームがいま持っている値で、ユーザー入力やJavaScriptでのvalue書き換えによって変化する、送信にもこちらの値が使われるけど、HTMLには現れない。

Comments

[ShunYoshizawa]

回答ありがとうございます！
HTMLのvalueの値を決済フォームで合計金額として、反映させたいと思っていたのですが、そういったことはできないということでしょうか？

[maisumakun]

いえ、逆に「JavaScriptから見えているvalueの値」がフォーム送信にも使われるので、HTMLで書き換わっていなくてもどこにも影響しません。

Answer 2

動いてますよー。

動くサンプル：https://jsfiddle.net/dru4Lxtg/