2

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

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

有没有人这样做过？

4

1 回答 1

1

您不一定需要为此使用 FormToWizard 插件，特别是如果您只想添加几个步骤而不是另一个完整的表单页面。首先，我会看一下动态选择菜单上的 Ryan Bates Railscast 。这是我使用的技术，效果很好。

这是我的表格。仅当从会议类型选择菜单中选择“亲自”时才添加位置输入

<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 文件中。添加的行当前查看集合输入字段，在这种情况下，它位于标记为用户的表单上，输入字段名称是选项。如果选择了“Foo”，则会出现“Next”按钮，用户可以继续到下一页，否则会显示提交按钮，他们可以提交表单。

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