指定したデータを別ページフォームへ引き継ぎたい！

前へ 次へ
このQ&Aのポイント
  • ECサイトで、商品の説明ページから問合せフォームへのデータ引き継ぎを実現したいです。
  • 商品説明ページの問合せボタンをクリックすると、指定した値が問合せフォームのテキストエリアに自動入力されます。
  • PHPやCGIを使用せず、JavaScriptのみで実現したいです。
回答を見る
  • ベストアンサー

指定したデータを別ページフォームへ引き継ぎたい!

問合せフォームとJAVASCRIPTに関する質問です。 ECサイトで、商品の説明ページが複数あります。 商品問合せを受け付けるようになっているのですが、各説明ページから「問合せ」ボタンをクリックした際に、問合せフォームの指定したテキストエリアに指定した文字列が入力されている状態にしたいのです。 例えば、商品番号がABC001の場合… ・商品説明ページに「ABC001」というデータを記載(HIDDENなど?) ・商品説明ページの問合せボタンを押すと、フォームの「商品番号」テキストエリアに既に「ABC001」という値が入っている ・商品説明ページの「ABC001」を「DEF002」に変更すると、フォームに入る値も「DEF002」になる これらの動作をCGI・PHPを使わずJAVASCRIPTで実現したいのですが、可能でしょうか。 ご回答、よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答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">

yasayoa
質問者

お礼

お返事遅くなりました。 実はちょっと苦戦していたのですが、先ほどテスト成功いたしました! 本当に助かりました。 ありがとうございます!

その他の回答 (1)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答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>

yasayoa
質問者

補足

早々の回答、ありがとうございます! 私の質問に不足している点がありましたので、補足で質問させて頂きます。 今回頂いたサンプルソースの場合は、商品IDのみ引き継ぐ事が出来ますが、これが「商品名(全角文字有)」「商品ID」「料金」など、複数に渡った場合はどのように記述すればよろしいでしょうか。 ご返答いただけますと嬉しいです。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 指定した複数のデータを別ページフォームに入れる

    非常に古い回答を参考にしています。2007/11/08 19:08 steel_grayさんが回答されている項目 希望する事は複数　商品一覧のA.htmlのページがあり それをお問合せフオームB.htmlのテキストボックスに投げ入れる スクリプトを希望 A.html <head> </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('問い合わせページのURL',{'CODE':'ABC001','NAME':'商品名'})"> </body> --------------------------------------- ・問い合わせページ ・・スクリプト(bodyのonloadで呼び出す) B.html <head> </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]); } } </script> <!--値を受取るフォーム部品 --> <input type="hidden" id="CODE"> <input type="hidden" id="NAME"> </body> それぞれCODEとNAMEのテキストボックスにデータが入りません 希望は<input type="hidden" id="CODE">にCODEのデータが入る <input type="hidden" id="NAME">にNAMEのデータが入る スクリプトを希望します。 何卒ご回答よろしくおねがいします。

  • フォームで入力した値を別のフォームにコピーする

    はじめまして！ javascriptでフォームAに入力した内容を ボタンが押されたら同一ページのフォームBに ペーストされるscriptを作りたいのですが そういったスクリプトを公開しているものがあれば 教えていただきたいです。よろしくお願いいたします。 やりたい事： [フォームA]--------------------- 　お名前：テキスト 　性別：ラジオボタン 　趣味：セレクトボックス 　コメント：テキストエリア 　[コピーボタン]←内容をコピーするボタン -------------------------------- ↓コピーボタンが押されたら↓ [フォームB]--------------------- 　お名前：テキスト 　性別：ラジオボタン 　趣味：セレクトボックス 　コメント：テキストエリア -------------------------------- Aフォームに入力した内容Bフォームに反映される よろしくお願いいたします。

  • JavaScriptでフォームへのフォーカス処理

    PHP、XHTML、CSSで応募フォームの作成をしております。 PHPとHTMLは別ファイルで作成しており、PHPにアクセスしてそのPHPが指定されたテンプレートを読みにいくような流れとなっております。 HTMLもPHPも完成して、応募フォームとして一通り動くようになったのですが、新たにフォーカス機能を追加したいということになりました。 具体的には、応募フォームの一番最初のテキストエリアに、ページ読み込み時にフォーカスを当てたいという内容です。 そこで、フォーカス機能用のJavaScriptを別ファイルで新たに作成し、動きを確認してみたところ上手く動きません。 HTMLとJavaScriptのソースは下記の通りです。 ==================================================================== ■HTML(全て書くと長くなってしまうので、簡略させていただきます) <script type="text/javascript" src="$path_top_js/focus.js"></script> <body onLoad="Focus()"> </head> <form name="top" action="index.php" method="POST" onReset="return false;" onSubmit="return false;"> <input type="hidden" name="USER_ID" value="$USER_ID"> <INPUT size="20" type="text" name="USER_ID" value="$USER_ID" MAXLENGTH="10"> </form> </body> ■JavaScript(focus.js) function Focus(){ document.top.USER_ID.focus(); } ==================================================================== 「フォームのname="USER_ID"というテキストエリアにフォーカスを当てる」という内容になります。 なぜフォーカスが当たらないのか、原因は予想がつくのですが、どう解決していいのか分かりません。 多分、フォームの値を保持するために記述しているhiddenタグ <input type="hidden" name="USER_ID" value="$USER_ID"> にJavaScriptのフォーカスが当たってしまっているみたいです。(フォーカスが当たっていると思われるhiddenタグは見ることができません) 試しにhiddenタグを外してみたところ、JavaScriptで指定したテキストエリアにフォーカスが当たっていることを確認しました。 「応募フォーム」ということで、ページ遷移した際にもフォームに入力した値を保持しておくためにhiddenタグは外したくないのですが、フォーカス機能もちゃんと動くようにしたいと思っております。 解決方法が分かる方いらっしゃいましたら、ご教授の程お願い致します。

    • ベストアンサー
    • HTML
  • JSP→JSP　フォームチェック

    困っているので助けてください。 まずプログラムの説明をさせてもらいます。 JSPからfromをつかってJSPにフォーム情報を送ります。 プログラムはこんな感じです。 <form action="abcdefg.jsp" method="post"> <input type="hidden" name="abc" value="abc"> <input type="hidden" name="def" value="def"> <input type="checkbox" name="aa" value="aa"> <input type="checkbox" name="bb" value="bb"> <input type="checkbox" name="cc" value="cc"> <input type="submit" value="次へ"> </form> これをabcdefg.jspで受け取る場合 String hidden_abc = request.getParameter("abc"); String hidden_def = request.getParameter("def"); とhiddenは必ず値が入っているのでこれで受け取れるのですが チェックボックスは選択しているかどうかわからないので上の記述では だめなようなのですがどのようなプログラムを書いたらいいのですか？ 説明がうまく出来なく申し訳ないです。よろしければ教えてください。

    • ベストアンサー
    • Java
  • あらかじめフォームに内容を入力させたい

    こんにちは。フォーム入力に関することで質問させていただきます。 １つのページに１０個の商品を置き、それぞれの説明の横に 「お問い合わせはこちら」というリンクを貼っています。（リンク先は全て同じ） ですが、問い合わせのページ自体は全て同じなので、一体どの商品についての問い合わせなのか分かりません。 なので、問い合わせのページに一緒に商品番号を入力する欄を作ったのですが、わざわざお客様に商品番号を入力させるのは手間です。 なので、リンクをクリックして問い合わせページに移ったときに、あらかじめ商品番号が入力されている形にしたいのです。 <a href="contact.html?商品番号=123123123">お問い合わせはこちら</a> のような感じです。 しかし具体的にどうやればいいかわかりません。javascriptで再現できるでしょうか？ phpやcgiの知識はまったくないので、どうぞよろしくお願いします。

  • 物件番号が自動的に挿入されるお問合せフォーム

    商品詳細ページから「この商品を問い合わせる」ボタンを押すと、 次表示された問合せフォームのページに、 商品番号が自動的に挿入されている、 といった機能のある、フリーのプログラムを探しています。 サンプル（お問合せボタン） http://www.yes1.co.jp/rire/bukken/6160120289 設置が容易であれば、JavaScriptでもPHPでもかまいません。 ご存じの方がいらっしゃいましたら、教えてください。 よろしくお願いいたします。

  • 【お問い合わせフォーム】プルダウン選択で、フォームの内容を変更したい

    【お問い合わせフォーム】プルダウン選択で、フォームの内容を変更したい お世話になります。 ある商品に関するお問い合わせフォームを制作していて、 プルダウンで「商品名」を選択したあとに、フォーム内容を変えたいと思っているのですが、 いろんなサイトを見て勉強してみましたが、方法がわからなくて困っています。 JavaScript、Jquery、PHPなど、変更できれば種類は問いません。 例を挙げますと、 【プルダウン選択】商品A　を選んだとき 【フォームの内容】テキストフィールド：氏名、住所、電話、お問い合わせ内容　　ラジオボタン：性別 【プルダウン選択】商品B　を選んだとき 【フォームの内容】テキストフィールド：氏名、ふりがな、住所、Eメール、お問い合わせ内容　　チェックボックス：固定電話、携帯電話 というように、プルダウンで選んだ項目に対して、それ以降の項目を変更させたいです。 設置時の希望として、 新たなページにジャンプするにしても、inframeを使って、あたかも同じページ内で完結し、ページ移動していないように見せたいです。 また、後の更新を考えて、なるべくシンプルなディレクトリ構成ができれば嬉しいです。 サーバは、cgi、php、javascriptが使えます。Jqueryはまだ試したことがありません。 どうぞよろしくお願いいたします。

  • フォームの値をリンクで渡す方法

    ふつうはフォームで <input type = "text"> <input type = "hidden" name ="test1"> <input type = "hidden" name ="test2"> <input type = "hidden" name ="test3"> <input type = "hidden" name ="test2"> とやっていけばいくつものフォームの値を渡せますね。 今回はリンクにフォームの値を入れたいのです。 a href ="http://sig.com/win.cgi?text1=$text1&text2=$text2" test1はリンクの値。 text2がテキストボックスのフォームの値です。 どうやってtext2の値を上のハイパーリンクに入れられるでしょうか？ やはりJAVASCRIPTを使う必要があるでしょうか？ （他の質問で解決済み） フォームとリンクの値を同時にCGIに渡す方法を教えてください。 自分としては1つ1つ値を渡していくしかないか、と考えました。

    • ベストアンサー
    • Perl
  • ウィンドウからウィンドウへ、フォームからフォームへデータの受け渡し。

    あるページにボタンを用意し、そのボタンをクリックすることで、 新しいウィンドウが開くようにしました。 あるページを001.html ,新しいページを002.htmlと仮にします。 001.htmlのボタンのフォームのトコロに、hiddenで たとえば、「この文章を渡す」と記述しておきます。 そして、新しく開いたウィンドウの中のフォームにhidden で渡したいのですが、どのようにしたらいいのですか？ 文章記述が曖昧でごめんなさい。補足要求があれば、 しますので、お願いします。 001.htmlにたとえば数学の問題があったとします。そうして、 その問題に対して質問があれば、そのページのボタンを クリックして質問してもらいたい。そのときに、何の問題かを 毎回書いてもらうのは面倒だと思い質問したのです。

  • 別ページからフォームへ移動したときにプルダウンの指定のメニューを自動選

    別ページからフォームへ移動したときにプルダウンの指定のメニューを自動選択したいです！ メニューページのAというメニューから予約フォームへリンクしたときにフォームのプルダウンを自動で Aメニューを選択した状態で表示したいのですが、どうしたら出来るのかわかりません。 Javascriptかphpでサンプルや参考になるページがありましたら教えてください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する