Question

Im attempting to style this plugin into my rails 3.2 app and having some problems.. http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx

The form is not saving to my model when i click submit, just redirects to the first step. …

Heres my view code:

     <h1>Tell us a little about yourself.</h1>


    <form id="SignupForm" action="">
    <fieldset>
    <legend>Personal Information</legend>
    <%= simple_form_for @user do |f| %>

      <%= f.input :city %>
      <%= f.input :address %>
      <%= f.input :zipcode %>
      <%= f.input :date_of_birth, :as => :date, :start_year => Date.today.year - 90,
        :end_year => Date.today.year - 12,
        :order => [:month, :day, :year ] %>
      <%= f.input :gender, :collection => ['male','female'] %>
      </fieldset>

      <fieldset>
      <legend>Interests & Holidays</legend>
      <h2>Select your top 3 interests..</h2>
      <label class="checkbox">


      <%= f.association :interests, :as => :check_boxes, :label => false %>
      </label>
      <br></br>
      <h2>What holidays do you celebrate?</h2>
        <label class="checkbox">
        <%= f.association :holidays, :as => :check_boxes, :label => false %>

        </label>
        <br></br>
        </fieldset>
        <fieldset>
        <legend>Friends Birthdays</legend>
        <h2>Add up to 10 friends birthdays that you would like to remember..</h2>
        <br></br>
        <%= f.simple_fields_for :friends do |friend_f| %>
          <div id="input1" style="margin-bottom:4px;" class="clonedInput">
          <%= friend_f.input :name %>
          <%= friend_f.input :dob, :label => :Birthday, :as => :date, :start_year => Date.today.year - 90,
            :end_year => Date.today.year - 12,
            :order => [:month, :day, :year ] %>
          <%= f.input :gender, :collection => ['male','female'] %>

          <input type="button" id="btnAdd" value="add another name" />
          <input type="button" id="btnDel" value="remove name" />
          </div>
        <% end %>


        <%= f.button :submit %>
        <%end%>
        </fieldset>
    </div>

And heres the js:

(function($) {
    $.fn.formToWizard = function(options) {
        options = $.extend({  
            submitButton: "" 
        }, options); 

        var element = this;

        var steps = $(element).find("fieldset");
        var count = steps.size();
        var submmitButtonName = "#" + options.submitButton;
        $(submmitButtonName).hide();

        // 2
        $(element).before("<ul id='steps'></ul>");

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

            // 2
            var name = $(this).find("legend").html();
            $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");

            if (i == 0) {
                createNextButton(i);
                selectStep(i);
            }
            else if (i == count - 1) {
                $("#step" + i).hide();
                createPrevButton(i);
            }
            else {
                $("#step" + i).hide();
                createPrevButton(i);
                createNextButton(i);
            }
        });

        function createPrevButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>");

            $("#" + stepName + "Prev").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i - 1)).show();
                $(submmitButtonName).hide();
                selectStep(i - 1);
            });
        }

        function createNextButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>");

            $("#" + stepName + "Next").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i + 1)).show();
                if (i + 2 == count)
                    $(submmitButtonName).show();
                selectStep(i + 1);
            });
        }

        function selectStep(i) {
            $("#steps li").removeClass("current");
            $("#stepDesc" + i).addClass("current");
        }

    }
})(jQuery); 

Answer 1

Here is how I solved the problem. I first edited the options in the formToWizard.js file like so:

.options = $.extend({ submitButton: “submit” }

Then in my view I changed the form element as shown below:

<script type="javascripts" src="formToWizard.js"></script>
  <form id="SignupForm" action= "users#create" method="post">
    <%= simple_form_for @user do |f| %>
     <fieldset><div id='step'>

       #multiple input fields

     <%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
   <% end %>
  </div></fieldset>
</form>

I used this to sign up users so I made sure to point the form element to my users#create path and then I used the method “post”. If you are unsure about which route to use in order to get to your create action in your controller just run rake routes and use that to fill in the “action” and “method” fields for the form and you should be good to go!