- ベストアンサー
指定したデータを別ページフォームに入れる方法
- 指定したデータを持つA.htmlページの商品一覧をお問い合わせフォームB.htmlのテキストボックスに入れる方法について詳しく教えてください。
- 2007年に回答された古い情報を参考にしていますが、現在も有効なスクリプトを希望します。
- A.htmlのボタンをクリックすると、問い合わせページB.htmlのテキストボックスにCODEとNAMEのデータが入りますが、現在は上手く動作していません。スクリプトの修正方法を教えてください。
- foot001
- お礼率33% (1/3)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ちなみに、問い合わせフォームに遷移した後のＵＲＬは次のどちらかのようになっていると思います。これは私の成功している例。 file:///C:/Users/user1/Desktop/b.html?CODE=ABC001&NAME=%E5%95%86%E5%93%81%E5%90%8D file:///C:/Users/user1/Desktop/b.html?CODE=ABC001&NAME=商品名 だいたい以下のような意味だと思ってください。 「?」までがアクセスするファイルのＵＲＬ。 「?」からがパラメータで、その内訳が、 変数「CODE」は値「ABC001」、 「&」が区切り文字、 変数「NAME」は値「商品名」、 としてＧＥＴ送信する、みたいな感じです。 なので、ひとつのテキストボックスに「ABC001商品名」が入るとしたら、例えば「CODE=ABC001商品名」のようになっていると思います。 そうであれば、質問者様が載せられているA.html側に問題があることになりますし、「変数=値」の組み合わせが正しいようであればB.html側に問題があることになると思います。 A.htmlに問題があるとしたら、テキストボックスは「ABC001商品名」のようなすっきりした値だけではなく「ABC001’,’NAME’:’商品名」とかになっていると思います。記号が全角です。
その他の回答 (2)
- dell_OK
- ベストアンサー率13% (776/5747)
なるほど。現象の確認をすると、添付画像の３段目のような状態になっていると言うことでいいでしょうか。 私がテストしたコードを載せます。添付画像の１段目と２段目が私の動作結果です。 まずは、新しくデスクトップにでもファイルを作成して、私と同じようになるかどうか試してみてください。 a.html －－－－ <!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <title>商品一覧</title> </head> <body> <script type="text/javascript"> function sendQuery(uri, querys) { var query = new Array; for (var x in querys) { query.push(x + '=' + encodeURI(querys[x])); } location.href = uri + '?' + query.join('&'); } </script> <input type="button" value="問合せ" onclick="sendQuery('b.html',{'CODE':'ABC001','NAME':'商品名'})"> </body> </html> －－－－ b.html －－－－ <!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <title>問い合わせ</title> </head> <body> <script type="text/javascript"> 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]); } } window.onload = setQuery; </script> <!--値を受取るフォーム部品 --> <input type="text" id="CODE"> <input type="text" id="NAME"> </body> </html> －－－－
- dell_OK
- ベストアンサー率13% (776/5747)
問題なさそうです。 データが入っていないことをどのようにして確認されたのでしょうか。 私は「type="hidden"」を「type="text"」にして確認してみましたが、正しく表示されました。
お礼
旨く行きました 丁寧な解説をいただき感謝しています。JAVAスクリプトの初心者で独学です 1週間程 ググールで検索をして 適切な回答を探していました。ありがとうございます。
補足
返信ありがとうございます。補足説明をします。 データーを受取る側のB.htmlフォームの テキストボックス <input type="text" id="CODE">テキストボックス に--ABC001 <input type="text" id="NAME">テキストボックスに---商品名が入るスクリプトを希望しますが ひとつテキストボックスにABC001と商品名が入ってしまいます。 初心者ですのでスクリプトの基本が判らないので困っています。