2012-04-15 18 views
3

私はJavaScriptを初めて使い、次のことを行う標準的な方法を見つけようとしています。フォームを複数回使用して送信する前に

私はいくつかのチェックボックスとセレクタを持つフォームを持っています。 チェックボックスは音楽のスタイルであり、セレクタは人の名前であるとします。

私は、複数の人に音楽のスタイルを選択し、すべてのデータを含むフォームを送信できるようにしたいと考えています。

たとえば、クラシック、ジャズ、ロック、ポップをチェックして「ジョー」を選択し、ジャズ、ポップ、カントリー、エレクトロニカを選択して「ジェーン」を選択します。したがって、「提出者」と「提出フォーム」には2つの異なるボタンが必要です。

私はしたいと思います。その後、

  1. は、名前のリストを持って、自分が選んだスタイルはフォームの下に埋める、フィードバック
  2. は、ユーザーが同じくらい彼らが望むようフォームを使用することを許可するため、および最後にすべてのデータを提出する

jqueryを使用するとJSONが最適ですが、これを行う方法を理解するために使用する検索用語はわかりません。

重要な場合は、フォームはPythonのDjangoビューで処理されます。

+0

JS以外のブラウザをサポートする必要がありますか? (通常、全ウェブユーザーの約2%)。モバイルブラウザ(携帯電話、タブレット)をサポートする必要がありますか? –

+0

js以外のブラウザーやモバイルデバイスをサポートする必要はありません。 – OregonTrail

+0

好奇心が強いですが、セレクター内に何人の人がリストアップできますか? – Alerty

答えて

1

これは、送信者にAJAXを使用することで実現できます。あなたの作業の流れは次のようになります:

  1. ユーザーはJoeとそれに対応する音楽スタイルを選択します。
  2. ユーザーは「送信者」にヒットします。このイベントでは、選択した人物(Joe)の名前とスタイルをJSONオブジェクトにエンコードし、AJAX(jquery ajax())リクエストを介してバックエンドスクリプトに渡します。
  3. サーバーサイドスクリプトは、必要な処理を行います。終了すると、AJAXは '成功ハンドラが呼び出されます。この時点で、おそらく「Joe」を削除することができます。そのため、ユーザーは送信が成功したことを知り、再びJoeに送信しません。
  4. フォーム内の他のすべての人のために洗浄、すすぎ、繰り返しを行います。

PS - AJAX経由でバックエンドに情報を渡すと、JSONとしてエンコードする必要はありません。標準のPOSTリクエストとして送信することもできます。 JSONにJavascriptオブジェクトをエンコードするには​​

上記の操作は1つの方法ですが、質問したように(データの収集を続ける - 一度に送信する)、そのように動作するようには機能しませんユーザーが[送信者]を押すたびに、データをJavascriptオブジェクトに追加しますが、送信しないでください。送信されたデータは、JSオブジェクトに蓄積され続けます。

最後に、ユーザーが[フォームを送信]を押すと、データを文字列化して送信します。

関連する問題