Question

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

所以我想也许我可以使用jquery FormToWizard插件。但是，当从下拉列表中选择值时，我没有运气在表单中动态添加步骤。

以前有人这样做过吗？

Answer 1

如果您只想添加几个步骤而不是另一个整个表单页面，则不一定需要使用FormToWizard插件。首先，我将在Dynamic Select Menus上看看Ryan Bates Railscast。这是我使用的技术，效果很好。

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

<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>

这是我的meeting.js.coffee文件，它检查meettype选择输入的值，并根据所选的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();
            }
        });

    });

jquery formtowizard插件 - 动态地向表单添加步骤

1 个答案: