問合せフォームと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で質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) パイソンでのプログラミングについて 3 2022/08/11 20:31
- Amazon 新規でAmazon商品ページ作成方法について 1 2022/03/28 00:22
- ZOZOTOWN 楽天に出店しているサプリメント会社が怪しいです 4 2022/06/03 00:10
- Amazon Amazon お急ぎ便に設定する方法 3 2022/12/20 04:32
- Excel(エクセル) Excelのセル内の特定の文字列を別のセルへ抽出したいです 2 2022/07/06 16:10
- その他(Microsoft Office) Excelで総数量を変動させたい 2 2022/11/04 23:49
- Yahoo!ショッピング ネットショッピングについて 3 2022/11/02 14:32
- docomo(ドコモ) 商品購入等のWeb口座振替。(ドコモ) 1 2022/04/14 01:17
- 消費者問題・詐欺 詐欺にあいました 8 2022/04/22 15:21
- Visual Basic(VBA) VBAのことで質問があります 2 2022/10/12 14:39
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像をボタンのようにフォーカ...
-
入力フォームの javascript で ...
-
JavaScript の 「showDialog」
-
親ページからインラインフレー...
-
複数のフォームを一括で送信す...
-
セレクトボックスを切り替える...
-
【html】)パスワード認証フォー...
-
セレクトボックスを2つ設けて選...
-
Json のキーと値の出力の違いに...
-
セレクトボックスの値による入...
-
送信ボタン押下時に値が未入力...
-
フォームによるメール送信の件...
-
URL パラメータを使ってフォー...
-
1アクションでPOST・GET、両方...
-
checkboxを「変更不可」にでき...
-
mailtoについて
-
switch文のswitch(n)の部分を複...
-
以前の質問だと、どの条件でも...
-
送信フォームを2つ用意する方法
-
プルダウンメニュー項目のフォ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
親ページからインラインフレー...
-
入力フォームの javascript で ...
-
[onClick]ボタンを押すことで入...
-
画像をボタンのようにフォーカ...
-
JavaScript の 「showDialog」
-
指定したデータを別ページフォ...
-
ブラウザの履歴を消す/アクセ...
-
cgi上のhtmlをrubyのifで条件分岐
-
複数の画像ボタンから複数の画...
-
検索結果画面の値の引継ぎとr...
-
チェックボックスで、チェック...
-
小窓をだしてMIDIを流すのですが。
-
確認ダイアログ表示後、他のペ...
-
テキストボックスのvalue属性で...
-
JavaScriptで入力チェックをし...
-
INPUTの内容をフォームの送信先...
-
テキストBOXの情報をもとにリン...
-
javascriptのパスワードっぽいもの
-
a.href の href を有効か無効に...
-
JavaScriptでのWebフォーム送信...
おすすめ情報