html/javascriptで2ステップフォームを設定する簡単な方法

Question

私は、ユーザがパーセルの詳細を記入し、様々なフィールドに基づいて価格を出力するhtmlフォームを持っています。私が望むのは、ユーザーが名前や連絡先情報などのいくつかのフィールドに記入してからsubmitを押すことで価格が幸せになり、フォームがPHPで処理される場合です。

私はこれを行う2つの方法を考えました。最初に1つのフォームを作成すると、それが送信されると、別のフォームが生成され、より多くの情報が要求されます。しかし、最初のフォームから2番目のフォームに変数を渡す方法が必要です。

2番目のアイデアは、ユーザーが特定のフィールドの値を変更したときに価格を出力し、他の連絡先情報フィールドを表示するように、フォームにトリガーを付けることでした。しかし、このアプローチが良いかどうかはわかりません。

これはクライアント側で最も簡単でスマートな方法は何ですか？

Answer 1

私は2番目のオプションを使用します。 1.サーバー側の処理ページを作成します

ステップは、あなたのフォームフィールドへの変更を監視し、JavaScriptを使用して

ステップ2. quote.php言います。有効なエントリがあれば、postデータをquote.phpに送信します。quote.phpは、引用符で返信します。 divを価格見積もりに入力します。

jQueryの例：

//You'll have to call this function whenever the user input changes 
//Call quote service 
$.get("/quote.php", 
    { 
    //Pass javascript variables as POST/GET variables 
    zip: txtzip, weight: txtweight, ship_method: txtship_method 
    }, 

    // Populate price div on this page with the quote response 
    function(data){ 
    $("#calc-price").html(data); 
    }); 

ステップ3：ユーザーが価格を気に入った場合、彼らは、フォームの残りの部分を記入し、あなたは定期的に老いたフォームのようにそれを処理します。

Answer 2

クライアントが価格計算を実行するために必要なすべてのデータを持っている場合は、2番目のアイデアに従って、いくつかの表示/非表示機能を備えた単一のフォームを提案します。他の人は同意しないかもしれませんが、私は読んだり書いたりするときにだけサーバに戻ります。さらに、利用可能なWebサービスがある場合はそれほど多くありません。