質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

4回答

5344閲覧

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

Samson818

総合スコア162

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/06/28 09:18

編集2018/06/28 09:40

料金表(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ですし、同じこと書くのもカッコ悪いので
良い方法がありましたらご教示ください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

とりあえず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

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Samson818

2018/06/29 07:40

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

0

行末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 さんが指摘されたように「無駄な回答時間」が消費されてしまいます。
guest

0

ベストアンサー

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

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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();
guest

0

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

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

投稿2018/06/28 09:27

papinianus

総合スコア12705

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Samson818

2018/06/28 09:36

postした値を受け取る記述を追加いたしました。 ページをわけたのは料金表と申込フォームで別々の見せ方をしたかったためです。 料金表と言うのはPVが高くなる画面ですので、そこから申し込みに飛ばしたいのです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問