change(function(){ の内容を　画面ロード時にも一度実行したい

料金表（price.html)　から選択したオプションを申込みページ(order.php)に反映させたうえで、反映させた内容によりその先のオプションを変更させたいです（javascript?)。

料金表（price.html)　

HTML
1<form name="simulation" action="order.php" method="POST">
2<input type="radio" name="customer" value="顧客数1000人以下" onClick="calc()" id="sim1"><label for="sim1">1,000人</label>
3<input type="radio" name="customer" value="顧客数3000人以下" onClick="calc()" id="sim2"><label for="sim2">3,000人</label>
4<input type="radio" name="customer" value="顧客数6000人以下" onClick="calc()" id="sim3"><label for="sim3">6,000人</label>
5<input type="submit" name="submit1" value="申し込み" />
6</form>

申込みページ(order.php)

php
1<?php
2function scr_ent($hosturl) {
3	global $customer;
4?>
5<!--中略-->
6<head>
7<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
8<script type="text/javascript" src="../js/form.js"></script>
9<script type="text/javascript">
10$(function(){
11	var ser = '<?php echo $customer ?>';
12	if( ser != '' ){
13	$('#service').val(ser);
14	}
15});
16</script>
17</head>
18<form method="post" action="order.php" name="form1">
19<select name="service" id="service" class="formsinput req" onChange="selectCheck()" required/>
20<option value="顧客数1000人以下">顧客数　1,000人まで</option>
21<option value="顧客数3000人以下">顧客数　3,000人まで</option>
22<option value="顧客数6000人以下">顧客数　6,000人まで</option>
23</select>
24<p><input id="mail" type="checkbox" group="group1" value="使用する" name="mail" onChange="selectCheck()"/>メール配信（月額<input type="text" name="mailprice" value="0" class="no_border" readonly />円）</p>
25</form>

申込みページに読み込んでいるform.js

javascript
1$(function selectCheck(){
2
3$(document.form1).change(function(){
4//顧客数により料金切り替え
5	var opt = document.form1.service.selectedIndex;
6	var str = document.form1.service.options[opt].value;
7	fObj = document.form1;
8if( str == '顧客数1000人以下' ){
9	fObj.mailprice.value = 30;
10}else if( str == '顧客数3000人以下' ){
11	fObj.mailprice.value = 50;
12}else if( str == '顧客数6000人以下' ){
13	fObj.mailprice.value = 80;
14}
15
16・・・つづく。。。
17})

先に制作した申込ページだけでやっている内はselectを変えると、月額〇円が変更されていました。
後から制作したhtmlから値を渡してselectを選んであげたところで月額〇円が出てきません。

javascriptの内容を画面をロードした時にも一度動かせればと思うのですが・・・
javascriptの冒頭の書き方↓を変更してformが変更された時もロードされた時も動く形に変えるにはどうすれば良いでしょうか？

javascript
1$(function selectCheck(){
2$(document.form1).change(function(){

イベントハンドラの一覧は見てみましたが使えそうなものに気づきませんでした。
あるいは何か他のやり方がありますでしょうか？
order.php内の$(functionにform.jsと同じ内容を書くと実現できましたが、
ホントはもっと長いしjavascriptですし、同じこと書くのもカッコ悪いので
良い方法がありましたらご教示ください。

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

回答4件

とりあえずjQueryの初期値はtriggerで処理します
jQuery自体データアクセスを簡便にするための機能ですから
もう少し表記方法を考えて書いたほうがいいですね

javascript
1$(function(){
2  var list={
3    '顧客数1000人以下':30,
4    '顧客数3000人以下':50,
5    '顧客数6000人以下':80,
6  };
7  $('[name=form1]').on('change',function(){
8    var v = $(this).find('[name=service]').val();
9    $(this).find('[name=mailprice]').val(list[v]);
10  }).trigger('change');
11});

HTML
1<form method="post" action="order.php" name="form1">
2<select name="service" id="service" class="formsinput req" required/>
3<option value="顧客数1000人以下">顧客数　1,000人まで</option>
4<option value="顧客数3000人以下">顧客数　3,000人まで</option>
5<option value="顧客数6000人以下">顧客数　6,000人まで</option>
6</select>
7<p><input id="mail" type="checkbox" group="group1" value="使用する" name="mail" />メール配信（月額<input type="text" name="mailprice" value="0" class="no_border" readonly />円）</p>
8</form>

投稿2018/06/28 10:55

yambejp

総合スコア117632

Samson818

2018/06/29 07:40

配列　ってのをまだ使用したことが無くて・・・ありがとうございます！次の段階と考えていたのですが、教示いただいたコードを元に、ここに書いてある以外の部分も直してみたいと思います。

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

行末3か所間違っているようです。

JavaScript
1//fObj.mailprice.value = 30,
2fObj.mailprice.value = 30;

投稿2018/06/28 09:38

x_x

総合スコア13749

Samson818

2018/06/28 09:41

ご指摘ありがとうございました。こちらに投稿するにあたり変更したら間違えてしまいました(〃ﾉωﾉ)

think49

2018/06/28 12:02 編集

To: ShimpeiFubasami さん質問を投稿する前に「質問文に書かれたコードだけ」で期待通りに動作するかを確認して下さい。さもなければ、x_x さんが指摘されたように「無駄な回答時間」が消費されてしまいます。

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

ベストアンサー

javascriptの内容を画面をロードした時にも一度動かせればと思うのですが・・・

定義時に実行しては？

js
1// $(document.form1).change( function(){} );
2//                                              ↓
3   $(document.form1).change( function(){} ).change();

【.change() | jQuery API Documentation】
http://api.jquery.com/change/#change

投稿2018/06/28 09:21

編集2018/06/28 09:28

kei344

総合スコア69625

Samson818

2018/06/28 09:49 編集

こんな感じに変更するという事であっていますか？ $(function selectCheck(){ $(document.form1).change(function(){ //顧客数により料金切り替え var opt = document.form1.service.selectedIndex; var str = document.form1.service.options[opt].value; fObj = document.form1; if( str == '顧客数1000人以下' ){ fObj.mailprice.value = 30; }else if( str == '顧客数3000人以下' ){ fObj.mailprice.value = 50; }else if( str == '顧客数6000人以下' ){ fObj.mailprice.value = 80; } ・・・つづく。。。 } ).change(); 最後の.change();はfunctionがチェンジしたらという意味あいになるのでしょうか？

kei344

2018/06/28 10:25

> 最後の.change();はfunctionがチェンジしたらという意味あいになるのでしょうか？ jQueryはご存知でしょうか？ $(document.form1).css(/*略*/).click(/*略*/).change(/*略*/); というふうにした場合、document.form1のcssを変更してクリックとchangeイベントを登録して、と繋いでいくライブラリです。で、.change() は .trigger('change') と同じ機能で、要素（上記例の場合document.form1）に登録されているchangeイベントを実行します。なので、「functionがチェンジしたら」ではなく、「document.form1に登録されているチェンジイベントを実行」ですね。

Samson818

2018/06/29 07:36

あぁ～！なるほど！初めての問い合わせフォーム制作で初めてJQuery使用していて全然知識が不足してました。 2個3個とつなげて書いて良いのですね！！試してみます。

Samson818

2018/07/06 07:00

久しぶりに着手出来て違う方法で成功いたしました。 ```jQuery $(function(){ function formchange(){ <略> } $(document.form1).change(formchange), $(document).ready(formchange); }); ``` いただいたアドバイスがかてとなり、いろいろ探して回れました。ありがとうございます。いろいろ見た中でも、どうも教えていただいた↓これで「 $(document.form1).change( function(){} ).change();」「定義時に実行」という方法で再現方法がわかりませんでした。もしよろしければお教えください。

kei344

2018/07/06 07:12

再現方法とは？

Samson818

2018/07/06 08:57

これだけだと上手く動いてくれなかったので、何が足りなかったのだろうかと思いまして。 $(document.form1).change( function(){<略>} ).change();

kei344

2018/07/06 09:46

https://jsfiddle.net/m4ub21zs/

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

チェンジもなにもPOSTした値を受け取ってないですよね？
POSTを受けとるコードを何かしら追記してみてください。

回答から外れてすみませんが、order.phpで選ばせているのに、プルダウンで再選択できるのであれば、なぜページを分けたのか疑問です。
もともと一枚のページで求める動作ができていたのに、なぜUXを犠牲にして(待ち時間と追加のクリックが発生)動かない状態にかえる必要があるのでしょうか？