【お問い合わせフォーム】プルダウン選択で、フォームの内容を変更したい
お世話になります。
ある商品に関するお問い合わせフォームを制作していて、
プルダウンで「商品名」を選択したあとに、フォーム内容を変えたいと思っているのですが、
いろんなサイトを見て勉強してみましたが、方法がわからなくて困っています。
JavaScript、Jquery、PHPなど、変更できれば種類は問いません。
例を挙げますと、
【プルダウン選択】商品A を選んだとき
【フォームの内容】テキストフィールド:氏名、住所、電話、お問い合わせ内容 ラジオボタン:性別
【プルダウン選択】商品B を選んだとき
【フォームの内容】テキストフィールド:氏名、ふりがな、住所、Eメール、お問い合わせ内容 チェックボックス:固定電話、携帯電話
というように、プルダウンで選んだ項目に対して、それ以降の項目を変更させたいです。
設置時の希望として、
新たなページにジャンプするにしても、inframeを使って、あたかも同じページ内で完結し、ページ移動していないように見せたいです。
また、後の更新を考えて、なるべくシンプルなディレクトリ構成ができれば嬉しいです。
サーバは、cgi、php、javascriptが使えます。Jqueryはまだ試したことがありません。
どうぞよろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
>>商品件数が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">
A用のフォームフィールド
</div>
<div id="B">
B用のフォームフィールド
</div>
と作っておくのが、もっともお手軽かも
yyr446さんへ
お返事大変遅くなりました。
試行錯誤のすえ、ようやく理想の形をつくることができました。
大変ありがとうございました。
No.2
- 回答日時:
>>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ファイルを
出力するといった流れです。
yyr446さん、ご回答ありがとうございます。
No.1さんの技を使いつつ、商品件数が30件強と多く、これからも増えるので、
yyr446さんの技も使いたいと思います!
いろいろ探してみたページは、第1プルダウンの選択後、第2プルダウンの内容が変わる・・・といったものでしたので、
ちょっと混乱してました。
>「商品名」の<select>を設置した<form>のtargetを<iframe>にしていったん
こちらの方法は、No1さんのフォームに追加設定できますでしょうか。
もしくは作りが違うタイプでしょうか。
formのターゲット指定(iframe)の記述方法を教えて頂ければ幸いです。
<form id="form1" target="??????">
どうぞよろしくお願いいたします。
No.1
- 回答日時:
どのくらいのバリエーションがあるのかによって違ってくるかもしれませんが、ご質問通りの内容程度だったら、項目をグルーピングしておいて切り替える程度でも良いのでは?
ただし、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>Eメール:<input type="text" name="address3" value="">
<p><input type="checkbox" name="tel2">固定電話
<input type="checkbox" name="tel3">携帯電話
</fieldset>
</form>
</body>
</html>
fujillinさん、ご回答ありがとうございました。
まさしくコレです!
グルーピング(フィールドセット)という方法は初めて知りました。
これで解決いたしました。
本当にありがとうございます!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) Excelのプルダウンメニューの内容を人によって可変する方法 2 2023/03/28 14:52
- JavaScript ラジオボタンによるフォームの開閉を行いたい 3 2022/03/31 21:30
- その他(プログラミング・Web制作) 入力フォームへ、データを自動的に入力するプログラム。どうやって作る? 4 2023/01/16 10:24
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- Excel(エクセル) Excel 入力した内容を保持したい 1 2023/06/23 12:27
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 2 2022/06/10 11:06
- JavaScript テーブルの中のセレクトボックスの値が0のとき、非表示にしたい 3 2022/05/29 10:13
- Excel(エクセル) エクセルの数式で教えてください。 1 2022/10/25 09:26
- Excel(エクセル) エクセルについて教えてください。 2 2023/06/14 11:11
- Excel(エクセル) Excel VBAプルダウンの値を変えながら2枚ずつ印刷する方法? 4 2022/05/27 13:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
struts selectbox optionsColle...
-
Selenium Basicの件
-
プルダウン内容に応じてラジオ...
-
セッション
-
SQLのmaxで求めた値を変数に代...
-
jquery.csv2table.jsに検索窓
-
Selenium4でボタンをクリックで...
-
階層別の組織図の自動作成について
-
EUC-JPに対応しているjQueryを...
-
マスターページ使用時のJavascript
-
JQueryの変数の扱いで弱ってい...
-
Ajax・jQueryでGETとPOSTする方法
-
Googleストリートビューの写真...
-
jQueryのblockUIをformのボタン...
-
繰り返し処理のシンプルな書き方
-
Google Apps Scriptを利用した...
-
ajaxからphpにpsotしたときの日...
-
jQueryを使いformでsubmitした...
-
JavascriptからPHPへのAjax通信...
-
jqueryについて、$("+dd",this)...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascriptを使ってQRコード読...
-
JavaScriptでtabindexの変更っ...
-
SQLのmaxで求めた値を変数に代...
-
パソコンで動くjavascriptがス...
-
IndexedDB を使ってファイルア...
-
Selenium Basicの件
-
ドラッグ & ドロップでのド...
-
<input>のvalue値をプルダウン...
-
HTMLタグのidにaaaという名をつ...
-
jquery.csv2table.jsに検索窓
-
プルダウン内容に応じてラジオ...
-
チェックボックスとラジオボタ...
-
javascriptの計算結果をvalue=""に
-
Javascript+PHPでのデータの受...
-
ボタンクリックした際、id末尾...
-
複数対応できるチェックボック...
-
VBAでIEのHTMLタグの要素を操作...
-
Doctrineのjoinについて
-
jQueryのclass属性削除ができま...
-
メールを送信するボタンでOutlo...
おすすめ情報