プロが教える店舗＆オフィスのセキュリティ対策術

【お問い合わせフォーム】プルダウン選択で、フォームの内容を変更したい

解決済

  • 質問者：instant113
  • 質問日時：
  • 回答数：3件

【お問い合わせフォーム】プルダウン選択で、フォームの内容を変更したい

お世話になります。
ある商品に関するお問い合わせフォームを制作していて、
プルダウンで「商品名」を選択したあとに、フォーム内容を変えたいと思っているのですが、
いろんなサイトを見て勉強してみましたが、方法がわからなくて困っています。
JavaScript、Jquery、PHPなど、変更できれば種類は問いません。

例を挙げますと、
【プルダウン選択】商品A　を選んだとき
【フォームの内容】テキストフィールド：氏名、住所、電話、お問い合わせ内容　　ラジオボタン：性別

【プルダウン選択】商品B　を選んだとき
【フォームの内容】テキストフィールド：氏名、ふりがな、住所、Eメール、お問い合わせ内容　　チェックボックス：固定電話、携帯電話

というように、プルダウンで選んだ項目に対して、それ以降の項目を変更させたいです。

設置時の希望として、
新たなページにジャンプするにしても、inframeを使って、あたかも同じページ内で完結し、ページ移動していないように見せたいです。

また、後の更新を考えて、なるべくシンプルなディレクトリ構成ができれば嬉しいです。

サーバは、cgi、php、javascriptが使えます。Jqueryはまだ試したことがありません。
どうぞよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： yyr446
  • 回答日時：

＞＞商品件数が30件強と多く、これからも増える



それじゃ、固定的にHTMLやJAVASCRIPT変数として作っておくと、ちょこっと
面倒になるかもしれないですね。

商品コード毎に、フォームのページをあるディレクトリーに作っておいて、
PHPで選択して読み込むというのが、よいかもしれません。

formのターゲット指定(iframe)の記述方法は普通に名前を指定するだけです。

<form target="prod_form" action="prod_sel.php" method="post">
<select name="prod_cd_sel" id="prod_cd_sel">
<option value="xx" selected>xx<option value="yy">yy
</select>
<input type="submit" value"商品選択">
</form>

<iframe name="prod_form" id="prod_form" src=""></iframe>

それから、
javascript使用を前提に出来る（意識的にOFFにする人はまずいない、携帯は何だけど）
なら、<iframe>なんて古典的な手法使わなくても javascriptでPHP側と
AJAX（非同期通信）して、ページ遷移無しで<fieldset>部分のみ書き換えられます。
今時のはやりは、みんなこの方法です。

さらに、例えばjQueryも使ってコーディングすれば、PHP無くても
<select id="prod_cd_sel">
<option value="A" selected>A<option value="B">B
</select>
<fieldset id="target"></fieldset>
に対して

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<script>
$(function(){
　$("#prod_cd_sel").change(function(){
　　$("target").load("/"+$(this).val()+".htm");
　});
});
</script>
と書くだけでファイル選択できそうな...
わざわざ読み込むファイルを分けなくても、
　　$("target").load("/hoge.html #" + $(this).val()");
で、hoge.htmlの中に
<div id="A">

Ａ用のフォームフィールド

</div>
<div id="B">

Ｂ用のフォームフィールド

</div>

と作っておくのが、もっともお手軽かも
    • good
    • 0
    • 件
通報する
この回答へのお礼

yyr446さんへ

お返事大変遅くなりました。
試行錯誤のすえ、ようやく理想の形をつくることができました。
大変ありがとうございました。

通報する
お礼日時：2010/09/24 12:49

No.2

  • 回答者： yyr446
  • 回答日時：

>>JavaScript、Jquery、PHPなど、変更できれば種類は問いません。


>>新たなページにジャンプするにしても、inframeを使って、あたかも
>>同じページ内で完結し、ページ移動していないように見せたいです。
>>サーバは、cgi、php、javascriptが使えます。

　と、そんなに制約を広げると、方法もたくさんありすぎて、何を提示して
よいやら悩む事になります。シンプルにとのご希望ですが、要望自体がシ
ンプルですから決して複雑にはなりません。

>>いろんなサイトを見て勉強してみましたが、方法がわからなくて困っています。

　この部分が、一番ひっかかります。どこが解らないのか書いてないので、
回答しても、やはり解らないんじゃないかと....

>>Jqueryはまだ試したことがありません。
　jQueryはjavascriptです。jQueryを使うと、ブラウザーの違いの吸収等で、
javascriptのコーディングが多少短く楽に書けるといったものです。
jQuery使わなくても、No1.さんの回答のように簡潔に作れます。
　（※ご希望の機能を提供するjQueryを使った既存のライブラリーやプラグイン
を探して、そのまま設置するという意味ですね）

javascriptの使用が不可能なブラウザーも救うなら、<iframe>とPHPですね
「商品名」の<select>を設置した<form>のtargetを<iframe>にしていったん
PHPにサブミットして、PHP側は「商品名」に応じた<form>のHTMLファイルを
出力するといった流れです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

yyr446さん、ご回答ありがとうございます。

No.1さんの技を使いつつ、商品件数が30件強と多く、これからも増えるので、
yyr446さんの技も使いたいと思います！

いろいろ探してみたページは、第1プルダウンの選択後、第2プルダウンの内容が変わる・・・といったものでしたので、
ちょっと混乱してました。

>「商品名」の<select>を設置した<form>のtargetを<iframe>にしていったん

こちらの方法は、No1さんのフォームに追加設定できますでしょうか。
もしくは作りが違うタイプでしょうか。

formのターゲット指定(iframe)の記述方法を教えて頂ければ幸いです。

<form id="form1" target="？？？？？？">

どうぞよろしくお願いいたします。

通報する
お礼日時：2010/08/19 13:52

No.1

  • 回答者： fujillin
  • 回答日時：

どのくらいのバリエーションがあるのかによって違ってくるかもしれませんが、ご質問通りの内容程度だったら、項目をグルーピングしておいて切り替える程度でも良いのでは？


ただし、javascriptを使用の場合スクリプトオフのユーザには動作しませんのでご注意を。

以下、簡単なサンプル。
（あくまでも要領のみなので、実際はもう少し考慮が必要）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
form#form1 fieldset { border:0; }
form#form1 fieldset#B { display:none; }
</style>
<script type="text/javascript">
<!--
function sample(sel) {
var target = sel.value;
var group = sel.form.getElementsByTagName("FIELDSET");
var i=0, fs;
while(fs=group[i++]) fs.style.display = fs.id == target?"block":"none";
}
//-->
</script>
</head>

<body>
<form id="form1">
<select name="select1" onchange="sample(this)">
<option value="A">A</option>
<option value="B">B</option>
</select>

<fieldset id="A">
<p>氏名：<input type="text" name="name1" value="">
<p>住所：<input type="text" name="address1" value="">
<p>電話：<input type="text" name="tel1" value="">
<p>お問合せ内容：<textarea namee="text1" cols="50" rows="4" value=""></textarea>
<p>性別：<input type="radio" name="sex1">男　
<input type="radio" name="sex1">女
</fieldset>

<fieldset id="B">
<p>氏　名　：<input type="text" name="name2" value="">
<br>ふりがな：<input type="text" name="name3" value="">
<p>住　所　：<input type="text" name="address2" value="">
<br>Ｅメール：<input type="text" name="address3" value="">
<p><input type="checkbox" name="tel2">固定電話　
<input type="checkbox" name="tel3">携帯電話
</fieldset>
</form>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillinさん、ご回答ありがとうございました。

まさしくコレです！
グルーピング(フィールドセット)という方法は初めて知りました。
これで解決いたしました。
本当にありがとうございます！！

通報する
お礼日時：2010/08/19 13:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報