jquery formto向导插件 - 动态添加步骤到表单

Question

我有一个简单的web表单，它允许用户提出请求票据。现在，需要显示另一个表单，当且仅当从第一个表单的下拉框中选择了某个值时。否则，用户只需填写该表格。

所以我想也许我可以使用jQuery的FormToWizard插件。然而，当从下拉列表中选择一个值时，我无法动态地在窗体中添加步骤。

有没有人做过这个？

Answer 1

你不一定需要使用FormToWizard插件，特别是如果你只是想添加几个步骤而不是另一个完整的页面。首先，我会看看Ryan Bates Railscast的Dynamic Select Menus。这是我使用的技术，它运行得很好。

这是我的表格。当“以人”从meettype选择菜单中选择的位置输入仅添加

<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选择输入的值和任一显示或隐藏位置我meeting.js.coffee文件基于所选meettype的输入字段。

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(); 
      } 
     }); 

    });