momojaja
@momojaja

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

FORMの自動計算式の反映について

解決したいこと

自動計算のフォームを作成しています。
〇(ラジオボタン)【アイテム(1)】 1500円
 ※基本料金なのでデフォルトで合計金額に加算されるようにしたい。
□(チェックボックス)【アイテム(2)】 1000円
□(チェックボックス)【アイテム(3)】 800円

合計金額 1500円

例)

上記のようにアイテムを並べ、ラジオボタンの【アイテム(1)】部分のみデフォルトでチェックが入っていて、合計金額にデフォルトで数値が反映されているように設定したいのですが、
input type の中にcheckedを使用しても、チェックがはいるものの、数値が反映されません。

該当するソースコード



<form name="myform">
	<dl>
		<dt>見積</dt>
		<dd>
			<div>
			  <label>
				<input type="radio" name="アイテム(1) " value="1500" onClick="calc_total()" checked="checked" >
				基本プラン
				<span class="price">¥1,500- </span>/月々
				<span class="basic">【基本】</span>
			</label>
			</div>
			<div>
			<label>
				<input type="checkbox" name="アイテム(2)" value="1000" onClick="calc_total()">
				アイテム(2)
				<span class="price">¥1,000- </span>/月々
				<span class="option">【オプション】</span>
			</label>
			</div>
			<div>
			<label>
				<input type="checkbox" name="アイテム(3)" value="1000" onClick="calc_total()">
				アイテム(3)
				<span class="price">¥800- </span>/月々
				<span class="option">【オプション】</span>
			</label>
			</div>
		</dd>
	</dl>
	<dl>
		<dt>お見積り合計金額(基本料金含む)</dt>
		<dd><input type="text" name="goukei" class="total_price"></dd>
	</dl>
</form>

<script>
<!--
function calc_total(){
  kingaku = 0;
  for (i=0; i<document.myform.length-1; i++){
    if (document.myform.elements[i].checked){
      kingaku += eval(document.myform.elements[i].value);
    }
  }
  document.myform.goukei.value = kingaku + " 円";
}
//-->
</script>

上記のタグで作成しており、

■デフォルトでチェックが入っているラジオボックスをクリックすると、合計金額に数字は反映される。
■デフォルトでチェックが入っているラジオボックスをクリックせず、他のチェックボックスをクリックすると正しい数字が合計金額に反映される。

上記のような挙動になるのですが、希望の挙動としては、

■何も操作せずに【アイテム(1)】の数値が合計金額に反映されている。

が希望です。

どなたかご助言いただけませんでしょうか。

0

1Answer

関数は定義しただけでは実行されません。
現状calc_totalが実行されるのは、ラジオボタンやチェックボックスをクリックしたとき(onClickイベント)になっています。
ですので、期待する動作を実現するには初回に一度実行する必要があります。

例えば、Window: load イベントを使うことで、ページが読み込みされたタイミングで任意の処理を実行することができます。

window.addEventListener("load", (event) => {
  console.log('ページが読み込みされました。');
});

2Like

Comments

  1. @momojaja

    Questioner

    ご丁寧なご回答、誠にありがとうございます。
    当方、javaの知識以外が極めて乏しいため、再度の質問になってしますのですが、
    console.log('ページが読み込みされました。←この部分に何かを指定して任意の処理を実行するものなのでしょうか')
    もし、可能であれば、当方が記載したソースコードに正解をご記載いただけませんでしょうか。
    厚かましい願いとは存じますが、可能であれば是非ご教示いただければ幸いです。

  2. @momojaja

    Questioner

    遅くなりましたがなんとか自己解決できました!
    ありがとうございました。

Your answer might help someone💌