2

ユーザーがリクエストチケットを発行できるシンプルな Web フォームがあります。ここで、最初のフォームのドロップダウン ボックスから特定の値が選択された場合にのみ、別のフォームを表示する必要があります。それ以外の場合、ユーザーはその 1 つのフォームに入力するだけで済みます。

それで、jquery FormToWizard プラグインを使用できるのではないかと考えました。ただし、ドロップダウンから値が選択されたときにフォームにステップを動的に追加することはできません。

誰もこれをやったことがありますか？

4

1 に答える 1

1

特に、別のフォームページ全体ではなく、いくつかのステップを追加するだけの場合は、必ずしも FormToWizard プラグインを使用する必要はありません。まず、Ryan Bates Railscast on Dynamic Select Menusを見てみましょう。これは私が使用したテクニックであり、うまく機能しました。

これが私のフォームです。場所の入力は、ミートタイプ選択メニューから「対面」を選択した場合にのみ追加されます

<div class="row">
  <div class="span6 offset3">
    <h1>Post a Meeting</h1>
    <%= simple_form_for @meeting do |f| %>
    <%= render 'shared/error_messages', object: f.object %>

    <%= f.input :meettype, :collection => ["In Person", "Skype", "Phone"], label: "Meeting Format" %>

    <div class="field">
    <%= f.label "Meeting Location" %>
    <%= f.text_field :location, placeholder: "Location Address" %>
    </div>

    <center><%= f.submit "Post Meeting", class: "btn btn-large btn-primary" %></center>
  </div>
</div>

これは、meettype 選択入力の値をチェックし、選択した meettype に基づいて場所入力フィールドを表示または非表示にする私の meeting.js.coffee ファイルです。

jQuery ->
  location = $('#meeting_location').html()
  mt = $('#meeting_meettype :selected').text()
  if mt != "In Person"
    $('#meeting_location').parent().hide()
  else
    $('#meeting_location').parent().show()
  $('#meeting_meettype').change ->
    meettype = $('#meeting_meettype :selected').text()
    if meettype =="In Person"
      $('#meeting_location').html()
      $('#meeting_location').parent().show()
    else
      $('#meeting_location').empty()
      $('#meeting_location').parent().hide()

FormtoWizard プラグインを使用すると、次のコード行を FormtoWizard.js ファイルに追加できます。追加された行は現在コレクションの入力フィールドを参照しています。この場合、それは user というラベルの付いたフォーム上にあり、入力フィールド名はオプションです。「Foo」が選択されている場合、「次へ」ボタンが表示され、ユーザーは次のページに進むことができます。それ以外の場合は、送信ボタンが表示され、フォームを送信できます。

steps.each(function(i) {
        $(this).wrap("<div id='step" + i + "'></div>");
        $(this).append("<p id='step" + i + "commands'></p>");
        var name = $(this).find("legend").html();

        //Add a selection variable to keep track of whatever input you want
        var select = $('#user_option :selected').text();

        $("#step" + 1).hide();
        $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");

        //If you are on the second part of the form hide the "Next" button and show "Submit"
        if (i>0){
            $("#" + stepName + "Next").parent.hide();
            $(submmitButtonName).show();
        }

        //When the user selects a certain value the "Next" button will appear to direct them to the next form.
        $("#user_option").on("change", function(e) {
            select = $('#user_option :selected').text();
            if (select == "Foo") {
                createNextButton(i);
                selectStep(i);
            }
            else {
                $(submmitButtonName).show();
            }
        });

    });
于 2012-08-30T01:18:06.817 に答える