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

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

ただいまの
回答率

90.34%

  • PHP

    21312questions

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

  • JavaScript

    17506questions

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

  • jQuery

    7104questions

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

  • HTML5

    4297questions

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

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 304

Samson818

score 82

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

料金表(price.html) 

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

申込みページ(order.php)

<?php
function scr_ent($hosturl) {
    global $customer;
?>
<!--中略-->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/form.js"></script>
<script type="text/javascript">
$(function(){
    var ser = '<?php echo $customer ?>';
    if( ser != '' ){
    $('#service').val(ser);
    }
});
</script>
</head>
<form method="post" action="order.php" name="form1">
<select name="service" id="service" class="formsinput req" onChange="selectCheck()" required/>
<option value="顧客数1000人以下">顧客数 1,000人まで</option>
<option value="顧客数3000人以下">顧客数 3,000人まで</option>
<option value="顧客数6000人以下">顧客数 6,000人まで</option>
</select>
<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>
</form>

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

$(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;
}

・・・つづく。。。
})

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

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

$(function selectCheck(){
$(document.form1).change(function(){


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+2

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

定義時に実行しては?

// $(document.form1).change( function(){} );
//                                              ↓
   $(document.form1).change( function(){} ).change();

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/28 18:39 編集

    こんな感じに変更するという事であっていますか?

    $(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がチェンジしたらという意味あいになるのでしょうか?

    キャンセル

  • 2018/06/28 19:25

    > 最後の.change();はfunctionがチェンジしたらという意味あいになるのでしょうか?

    jQueryはご存知でしょうか?
    $(document.form1).css(/*略*/).click(/*略*/).change(/*略*/);
    というふうにした場合、document.form1のcssを変更してクリックとchangeイベントを登録して、と繋いでいくライブラリです。

    で、.change() は .trigger('change') と同じ機能で、要素(上記例の場合document.form1)に登録されているchangeイベントを実行します。
    なので、「functionがチェンジしたら」ではなく、「document.form1に登録されているチェンジイベントを実行」ですね。

    キャンセル

  • 2018/06/29 16:36

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

    キャンセル

  • 2018/07/06 16:00

    久しぶりに着手出来て違う方法で成功いたしました。
    ```jQuery
    $(function(){
    function formchange(){
    <略>
    }
    $(document.form1).change(formchange),
    $(document).ready(formchange);
    });
    ```
    いただいたアドバイスがかてとなり、いろいろ探して回れました。
    ありがとうございます。

    いろいろ見た中でも、どうも教えていただいた↓これで
    「 $(document.form1).change( function(){} ).change();」
    「定義時に実行」という方法で再現方法がわかりませんでした。

    もしよろしければお教えください。

    キャンセル

  • 2018/07/06 16:12

    再現方法とは?

    キャンセル

  • 2018/07/06 17:57

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

    キャンセル

  • 2018/07/06 18:46

    https://jsfiddle.net/m4ub21zs/

    キャンセル

+2

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

//fObj.mailprice.value = 30,
fObj.mailprice.value = 30;

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/28 18:41

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

    キャンセル

  • 2018/06/28 21:02 編集

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

    キャンセル

+2

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

$(function(){
  var list={
    '顧客数1000人以下':30,
    '顧客数3000人以下':50,
    '顧客数6000人以下':80,
  };
  $('[name=form1]').on('change',function(){
    var v = $(this).find('[name=service]').val();
    $(this).find('[name=mailprice]').val(list[v]);
  }).trigger('change');
});
<form method="post" action="order.php" name="form1">
<select name="service" id="service" class="formsinput req" required/>
<option value="顧客数1000人以下">顧客数 1,000人まで</option>
<option value="顧客数3000人以下">顧客数 3,000人まで</option>
<option value="顧客数6000人以下">顧客数 6,000人まで</option>
</select>
<p><input id="mail" type="checkbox" group="group1" value="使用する" name="mail" />メール配信(月額<input type="text" name="mailprice" value="0" class="no_border" readonly />円)</p>
</form>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/29 16:40

    配列 ってのをまだ使用したことが無くて・・・
    ありがとうございます!

    次の段階と考えていたのですが、教示いただいたコードを元に、
    ここに書いてある以外の部分も直してみたいと思います。

    キャンセル

-1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/28 18:36

    postした値を受け取る記述を追加いたしました。

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

    キャンセル

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • PHP

    21312questions

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

  • JavaScript

    17506questions

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

  • jQuery

    7104questions

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

  • HTML5

    4297questions

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