ステップに分けてユーザに入力してもらうフォームを作りたいと思っています。

たとえば、ステップ1で、希望商品を選択、ステップ2で、住所と名前を記入して送信というイメージです。
ステップ1で入力した情報をどうやって保持して、ステップ2にいくようにすればよいのでしょうか。JavaScriptで可能なのでしょうか。
たとえば下記の賃貸サイトでは、路線を選択した後、希望の条件を選択するようになっています。
http://www.pitat.com/do/rentSearch?ARAC_CH=D&DPNO_CH=1,2,4,6&searchCategory=RENT&searchThingType=APARTMENT&searchWay=LINE&areaCD=

よろしくお願いたします。

回答の条件
  • URL必須
  • 1人5回まで
  • 登録:2007/10/31 09:58:20
  • 終了:2007/11/07 10:00:04

回答(3件)

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812007/10/31 10:08:35

ポイント27pt

http://www.tohoho-web.com/wwwcook.htm

cookie を使います。

PHP などではセッション変数を使ったりもします。

id:y-kawaz No.2

y-kawaz回答回数1420ベストアンサー獲得回数2252007/10/31 10:50:34

ポイント27pt

情報を複数ページで持ち回るに方法は大きく分けて2つあります。

  • 一つはセッションを使う方法。これはサーバ側に前画面のフォームの入力データを保存しておく方法です。セッションが利用可能な場合はこれを使うのが一番お手軽じゃないかと思います。セッションについてはCGI等サーバ側プログラムで利用している言語名とセッションというキーワードで検索すれば情報が得られるでしょう。
    • 利点は保持するデータが大きくなってもユーザ間とのやりとりはセッションIDだけで済むところです。
    • 欠点はクッキーが使えない場合セッションIDの持ち回りが面倒なこととサーバが多重化された際に複数サーバ間でのセッションの共有もしくはロードバランシングに関して考慮することが増えるところでしょうか。
  • セッションを使わない場合は、前画面の入力データを次画面のフォーム内にhiddenパラメータとして埋め込んでおく方法です。
    • 利点はセッションの維持が不要でシンプルなことです。常に1リクエストで処理が完結するのでサーバ構成に気を使う必要がありません。クッキーが使えるかどうかなども気にしなくて良いです。
    • 欠点は複数ページ間で持ち回るデータがで増えること(hiddenで隠れているだけなので)です。

上記2つはともにサーバ側での処理が必要ですが、静的HTMLとJavascriptで実現することも出来なくはありません。例えば以下のような方法が考えられます。

  • フォームのmethodを指定しない(GETにしておく)と入力値は次ページのURLに ?foo=bar という形で引き継がれるので、Javascriptでそれを取得して利用する。
  • 実は多くの入力項目がある1つのフォームにしておき、先の入力項目はスタイルシートで表示を消しておき、次ページボタンを押すと実はページ遷移はせずJavascriptで今までの項目を消して、次ページ(のつもり)の表示項目を表示させていく。

などの方法が考えられます。

http://q.hatena.ne.jp/answer

id:warumaki

ご回答ありがとうございます!

-------------

フォームのmethodを指定しない(GETにしておく)と入力値は次ページのURLに ?foo=bar という形で引き継がれるので、

Javascriptでそれを取得して利用する。

-------------

上記のやりかたでトライしてみる場合、「Javascriptでそれを取得して利用する」というのがよくわかりません。

Javascriptではどのような関数を指定するのでしょうか。

2007/10/31 15:13:06
id:y-kawaz No.3

y-kawaz回答回数1420ベストアンサー獲得回数2252007/10/31 16:15:41

ポイント26pt

URLの?以降の文字は location.search に入るのでそれを適当にパースしてやればパラメータの値が取得できます。

例えば次のようなJavascriptの関数を書いておけば、

function parseQuery(query) {
        var params = {};
        if(location.search) {
                var pairs = location.search.substring(1).split("&");
                for (var i = 0; i < pairs.length; i++) {
                        var kv = pairs[i].split("=");
                        params[decodeURIComponent(kv[0].replace(/\+/g, ' '))] = kv[1] ? decodeURIComponent(kv[1].replace(/\+/g, ' ')) : '';
                }
        }
        return params;
}

以下のようにしてパラメータ foo の値が取得できます。

var params = parseQuery(location.search);
alert(params['foo']);

但しよほどの制限(静的ファイルしか利用できないなど)が無い限り、これは奇手に属すると思うので、通常はまず上に上がっているセッションやクッキーやhiddenを検討します。

http://q.hatena.ne.jp/answer

id:warumaki

ありがとうございます。

セッションやクッキーやhiddenを検討してみて、

それから、教えていただいたやり方を試してみたいと思います。

ありがとうございます。

2007/10/31 16:19:53

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません