問合せフォームとJAVASCRIPTに関する質問です。
ECサイトで、商品の説明ページが複数あります。
商品問合せを受け付けるようになっているのですが、各説明ページから「問合せ」ボタンをクリックした際に、問合せフォームの指定したテキストエリアに指定した文字列が入力されている状態にしたいのです。
例えば、商品番号がABC001の場合…
・商品説明ページに「ABC001」というデータを記載(HIDDENなど?)
・商品説明ページの問合せボタンを押すと、フォームの「商品番号」テキストエリアに既に「ABC001」という値が入っている
・商品説明ページの「ABC001」を「DEF002」に変更すると、フォームに入る値も「DEF002」になる
これらの動作をCGI・PHPを使わずJAVASCRIPTで実現したいのですが、可能でしょうか。
ご回答、よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
#1です。
複数の場合。・商品紹介ページ
・・スクリプト(ページの文字コードがUnicodeならスクリプトも要らないんですが一応)
function sendQuery(uri,querys){
var query = new Array;
for(var x in querys) {
query.push(x+'='+encodeURI(querys[x]));
}
location.href=uri+'?'+query.join('&');
}
・・問い合わせボタン
<input type="button" value="問い合わせる"
onclick="sendQuery('問い合わせページのURL',{'CODE':'ABC001','NAME':'商品名'})">
↑IDと、値の組み合わせを好きなだけ
・問い合わせページ
・・スクリプト(bodyのonloadで呼び出す)
function setQuery(){
var querys = location.search.replace(/^\?/,'').split(/&/);
for(var i=0;querys[i];i++){
var query = querys[i].split('=');
document.getElementById(query[0]).value = decodeURI(query[1]);
}
}
・・値を受取るフォーム部品
<input type="hidden" id="CODE">
<input type="hidden" id="NAME">
お返事遅くなりました。
実はちょっと苦戦していたのですが、先ほどテスト成功いたしました!
本当に助かりました。
ありがとうございます!
No.1
- 回答日時:
・商品説明ページからのリンクのクエリに商品番号を入れておく。
例(リンク)
<a href="~~?ABC001">この商品について問い合わせる</a>
例(ボタン)
<input type="button" value="この商品について問い合わせる"
onclick="location.href='~?ABC001'">
・問い合わせページでクエリを解析してフォームに埋める。
例
<html>
<head>
<script type="text/javascript">
function setQuery(){
// id='CODE'のフィールドにURLの'?'以降を設定する
document.getElementById('CODE').value =
location.search.replace(/^\?/,'');
}
</script>
</head>
<body onload="setQuery()">
<form ~>
<input type="text" id="CODE">
</form>
</body>
</html>
この回答への補足
早々の回答、ありがとうございます!
私の質問に不足している点がありましたので、補足で質問させて頂きます。
今回頂いたサンプルソースの場合は、商品IDのみ引き継ぐ事が出来ますが、これが「商品名(全角文字有)」「商品ID」「料金」など、複数に渡った場合はどのように記述すればよろしいでしょうか。
ご返答いただけますと嬉しいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
追加ボタンを押した際に ok ボ...
-
GASでチェックボックスを一括of...
-
特定の文字列を複数抜き出した...
-
jsonテキストデータの並び替え...
-
jQueryで同じクラス名のものを...
-
鍵盤アプリで、スマホの画面に...
-
jQueryでシンセサイザーを作っ...
-
HTMLでサブフレームから親のス...
-
ボタンを押したあとに画像を表...
-
disabled プロパティが表示され...
-
初心者です。gulpでコンパイル...
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
-
プログラミング 学習
-
ジャバスクリプトについて。
-
Colorboxがうまく設置できません
-
jsで質問です。 ボタンが二つ存...
-
前回の質問の続き function mov...
-
このプログラムに、王手をかけ...
-
前回の質問の続き function mou...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
親ページからインラインフレー...
-
JavaScript 超初心者です。 Doc...
-
submit時に違うページに飛びたい
-
画像をボタンのようにフォーカ...
-
JavaScript の 「showDialog」
-
確認ダイアログ表示後、他のペ...
-
指定したデータを別ページフォ...
-
ウィンドウからウィンドウへ、...
-
[onClick]ボタンを押すことで入...
-
cgi上のhtmlをrubyのifで条件分岐
-
別なページにジャンプさせたい
-
チェックボックスで、チェック...
-
商品ページのフォームのテキス...
-
ジャバスクリプトに関して
-
Javascirptによるページ内への...
-
JQueryのpostメソッドでファイ...
-
テキストエリア内にボタン1つ...
-
ダウンロードと同時に新しいペ...
-
入力フォームの javascript で ...
-
ボタンクリックで
おすすめ情報