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

問合せフォームとJAVASCRIPTに関する質問です。

ECサイトで、商品の説明ページが複数あります。
商品問合せを受け付けるようになっているのですが、各説明ページから「問合せ」ボタンをクリックした際に、問合せフォームの指定したテキストエリアに指定した文字列が入力されている状態にしたいのです。

例えば、商品番号がABC001の場合…
・商品説明ページに「ABC001」というデータを記載(HIDDENなど?)
・商品説明ページの問合せボタンを押すと、フォームの「商品番号」テキストエリアに既に「ABC001」という値が入っている
・商品説明ページの「ABC001」を「DEF002」に変更すると、フォームに入る値も「DEF002」になる

これらの動作をCGI・PHPを使わずJAVASCRIPTで実現したいのですが、可能でしょうか。
ご回答、よろしくお願いいたします。

A 回答 (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">
    • good
    • 0
この回答へのお礼

お返事遅くなりました。
実はちょっと苦戦していたのですが、先ほどテスト成功いたしました!

本当に助かりました。
ありがとうございます!

お礼日時:2007/11/13 12:16

・商品説明ページからのリンクのクエリに商品番号を入れておく。


例(リンク)
<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」「料金」など、複数に渡った場合はどのように記述すればよろしいでしょうか。

ご返答いただけますと嬉しいです。

補足日時:2007/11/08 19:44
    • good
    • 2

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