forms - フォーム変更のベスト プラクティス

Question

私のテンプレートには、国選択ボックスと、国に基づいて動的に変化する州要素があります。たとえば、米国を選択すると、州は米国の州を含む選択ボックスになります。他の国を選択すると、都道府県はテキスト フィールドのみになります。私はJavascriptでそれをしなければならないことを知っていますが、この場合のベストプラクティスを知りたいです. なにか提案を？

Answer 1

この質問は、stackoverflow でほぼ毎日発生します。

関連する複数の選択フィールド タイプのベスト プラクティスは、サブ選択を追加するための専用の送信ボタンを使用して、データベースから最初の選択ボックスのみをロードすることです。

フォームを初めてレンダリングするときに、可能なすべてのサブセレクトをフェッチしないでください。たとえば、国 -> 州 -> 市区町村のようなものを表示すると、重いデータベース クエリが簡単に発生する可能性があります。

フォームが「州の表示」ボタンを使用して送信された場合は、関連するサブ選択を「都市の表示」ボタンとともにフォームに追加するか、他のサブ選択が読み込まれない場合は、最後の「保存」ボタンを使用します。

このようにして、JavaScript を使用しないユーザーは、最初は不要な副選択クエリを使用することなく、二重選択を使用できます。JS で 2 番目の選択を非表示にするだけではベスト プラクティスではありません。

JavaScript によるプログレッシブ エンハンスメントはAJAXになります。つまり、国の州のJSONリストをロードし、「州を表示」ボタンを削除し、ハンドルバーや口ひげなどのJS テンプレートエンジンを使用してデータをレンダリングし、「保存」ボタンを追加します。

このようにして、クライアント ブラウザに繰り返しデータを送信しすぎる必要がなくなります (オプション、オプション、オプション ... )。

最後のステップは、ロード時間を短縮するためにクライアントとサーバー側をキャッシュすることです。おそらく、何らかのバックグラウンド プリロード、つまりクライアントの優先言語の上位 5 つの選択肢を含むことさえあります。