jquery formto wizard plugin - adding steps to the form dynamically

Question

I have simple web form that allows users to raise a request ticket. Now, there is a requirement to display another form, if and only if a certain value is selected from a drop down box in the first form. Else, the user only has to fill that one form.

So i thought maybe I could use the jquery FormToWizard plugin. However I have no luck in dynamically adding steps in the form when a value is selected from the drop down.

Has anyone done this before ?

rocket scientist · Answer 1 · 2012-09-04T19:55:03.663

You dont necessarily need to use the FormToWizard plugin for this especially if you just want to add a couple of steps and not another whole form page. First, I would take a look at Ryan Bates Railscast on Dynamic Select Menus. This is the technique I used and it worked great.

Here is my form. The location input is only added when "In Person" is chosen from the meettype select menu

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

Here is my meeting.js.coffee file which checks the value of the meettype selection input and either shows or hides the location input field based on the meettype selected.

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

Using FormtoWizard plugin you can add the following lines of code to your FormtoWizard.js file. The added lines currently look at a collection input field in this case it is on a form labeled user and the input field name is option. If "Foo" is selected then the "Next" button appears and the user can continue on to the next page otherwise the submit button is shown and they can submit their form.

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

    });

I agree that I do not have to use the FormtoWizard plugin to achieve this. However the 2nd form that needs to be conditionally displayed is a huge form i.e it has more than 10 fields, and I do not want to display it on the same page. This enables scrollbars in the page and filling the form becomes tedious for the end-user. Thats why I thought the plugin was a good option. Maybe I should look for other options. Any ideas ? — Lin, Sep 03 '12 at 13:36
I see what you mean, I edited my answer to show some lines of code you could add to your FormtoWizard.js file that will allow the "Next" button to only appear for certain inputs. Hope that helps! — rocket scientist, Sep 04 '12 at 19:56
wow thanks!! i have one question though .. in the above code, at all times my conditional form will be hidden and displayed only when the user selects a particular value from dropdown... so if that value is not selected, the hidden form is also submitted to the server side script isnt it ? I mean it is not that the second form is physically removed and added from the DOM... right ? — Lin, Sep 05 '12 at 15:12
YES, you are correct. The hidden part is still part of your form, its just the HTML tags that help us hide it through the Jquery. — rocket scientist, Sep 05 '12 at 19:46

jquery formto wizard plugin - adding steps to the form dynamically

1 Answers1