13

複数のステージを持つ Web フォームを構築しようとしています。Stack Overflow / Stack Exchange flagging webform からパターン化しています。問題は、「次の段階」のアクションをトリガーする方法がわからないことです。

たとえば、Stack Overflow で質問にフラグを立てたい場合は、クリックflagすると、選択を求めるポップアップが表示されます。2 番目のオプション (「ここに属していない、または重複している」) を選択すると、フォームは自動的に 2 番目の画面に移動します。

最初の画面:

ページ 1

クリックすると、次の場所に自動リダイレクトされます。

2ページ目

問題は、根本的なトリガーが何であるかがわからないことです。そのラジオ ボタンをクリックすると、エンド ユーザーはどのように次の画面に移動しますか?

ソースを確認してみましたが、画像の半分しか表示されていないように感じます。

ページソース

私が見つけた HTML チュートリアルの量には、これに似た実践例はありません。これは JavaScript であると思われますが、これらのアクションをトリガーするリンクされた .js ファイルが見つかりません。

では、クリック時に Web フォームがどのように自動リダイレクトされるのでしょうか? フォローアップとして、JavaScript を使用している場合、使用できる HTML/CSS のみの回避策はありますか?

4

2 に答える 2

7

これについては、フレームワークよりも低いレベルで考えると役立つ場合があります。多段階フォームを作成する方法は 2 つあります。

最初の (そして一般的に古い) 方法は、状態をサーバーに保存することです。フォームの各段階は、実際には個別のフォームであり、アンケートのクライアントの進行状況はサーバーに保持されます (たとえば、セッション データの一部として)。

2 番目の方法 (より現代的な方法) は、ご想像のとおり、JavaScript を使用することです。この場合、実際にはブラック マジックはほとんどなく、クリックによる自動リダイレクトはまったくありません。ユーザーの選択に応じて要素の一部を表示/非表示にする非常に長いフォームを 1 つ作成するだけです (もちろん、<form>表示/非表示にする要素を複数持つこともできます)。

于 2012-05-11T02:49:23.420 に答える
0

なんらかの jQuery ウィザード プラグインを使用して、自分のニーズに合わせます。つい最近やりましたが、そんなに難しくありませんでした。SmartWizard 3.0 を試す必要があります。かなりアクティブです。最後のリリースは約 2 か月前で、コーダーは私の質問に非常に迅速に回答してくれました。

ここにあります：https://github.com/mstratman/jQuery-Smart-Wizard

ウィザードをトリガーして、イベントをラジオ ボタンをクリックするアクションにリンクする次のステップに進むことができます。

幸運を ：）

于 2012-05-11T02:58:14.950 に答える