Want to build a multiple step form for registration form built with devise gem

I used devise to generate sign-up/registration form. But my registration form have many fields which I want to use to make multiple step form. The first steps will is to accept email n password. As user enter it, they can proceed to fill other form.

    <h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= devise_error_messages! %>

    <div class="field">
      <%= f.label :first_name %><br />
      <%= f.text_field :first_name, autofocus: true %>
    </div>

    <div class="field">
      <%= f.label :last_name %><br />
      <%= f.text_field :last_name %></br>
    </div>

    <div class="field">
      <%= f.label :birth_date %></br>

      <%= f.date_select :birth_date, :start_year=>1905,:end_year=>2015 %>
    </div>

    <div class="field">
      <%= f.label :city %></br>
      <%= f.text_field :city %>
    </div>

    <div class="field">
      <%= f.label :address %></br>
      <%= f.text_area :address %>
    </div>

    <div class="field">

        <%= f.label :country %></br>
        <%= f.select(:country, [['India', 'India'], ['USA', 'USA']]) %>
    </div>

    <div class="field">
      <%= f.label :zip_code %></br>
      <%= f.text_field :zip_code %>
    </div>

    <div class="field">
      <%= f.label :gender %></br>
      <span class="option">Male</span><%= f.radio_button :gender, "m" %>
      <span class="option">Female</span><%= f.radio_button :gender, "f" %></br>
    </div>

    <div class="field">
      <%= f.label :mobile_no %></br>
      <%= f.telephone_field :mobile_no %>
    </div>

    <div class="field">
      <%= f.label :website %></br>
      <%= f.url_field :website %>
    </div>

    <div class="field">
      <%= f.label :email %><br />
      <%= f.email_field :email %>
    </div>

    <div class="field">
      <%= f.label :password %>
      <% if @validatable %>
          <em>(<%= @minimum_password_length %> characters minimum)</em>
      <% end %><br />
      <%= f.password_field :password, autocomplete: "off" %>
    </div>

    <div class="field">
      <%= f.label :password_confirmation %><br />
      <%= f.password_field :password_confirmation, autocomplete: "off" %>
    </div>

    <div class="field">
      <%= f.label :Launguages_Known %><br />
      <%= f.text_field :language %>
    </div>

    <div class="field">
      <%= f.label :skills %><br />
      <%= f.text_field :skills %>
    </div>

    <div class="field">
      <%= f.label :passion %><br />
      <%= f.text_field :passion %>
    </div>

    <div class="field">
      <%= f.label :connecting_conditions %><br />
      <%= f.text_area :connect_pref %>
    </div>


    <div class="actions">
      <%= f.submit "Sign up" %>
    </div>
<% end %>

This form is very long so, I want to make it multistep. Also after successful filling this form, user should be redirected to a specific page.

Need help to generate multistep form for registration page and redirection to status page after successful signup.

Answers


If you want to submit your form in steps so please go through with this :

https://github.com/aasm/aasm

suppose you want to submit your form in three steps like this :

profile_details

address_details

technical_details

First you need to define transection states at your modal like this :

 aasm do
    state :loaded, :initial => true
    state :profile_details
    state :address_details
    state :technical_details

  event :fill_basic_info do
    transitions :from => :loaded, :to => :profile_details, :guard => Proc.new { |o|
    o.valid?
  }
  end

  event :fill_residential do
    transitions :from => :profile_details, :to => :address_details
  end

  event :fill_skills do
    transitions :from => :address_details , :to => :technical_details
  end

  event :previous_step do
    transitions :from => :technical_details, :to => :address_details
    transitions :from => :address_details , :to => :profile_details
    transitions :from => :profile_details, :to => :loaded
  end
 end

def change_ad_next_state
   case self.aasm_state
   when "loaded"
    fill_basic_info
   when "profile_details"
    fill_residential
   when "address_details"
    fill_skills
   end
 end

At your controller :

def create
  @user = User.new(user_params)

 if @user.select_tenant && @user.save
   redirect_to edit_user_path(@user)
 else
   @user.previous_step
   render "new"
 end
end

def update
  @user = User.find params[:id]
  if @user.change_ad_next_state &&    @user.update_attributes(advertisement_params)
    redirect_to some_path_here and return
  else
    @user.previous_step
    render "edit"  and return
  end
end

def previous_step
  @user = User.find(params[:id])
  if !@user.loaded? && @user.previous_step && @user.save
    redirect_to edit_user_path(@user)
  else
    redirect_to :back
  end
end

private 

 def user_params
   params.require(:user).permit(:first_name,:last_name,:email,:password  etc....)
 end

and also define routes for all the methods if you didn't define.


I suggest to use wicked gem. Minimalistic and useful


For first step you just take email and password and submit it.

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= devise_error_messages! %>

    <div class="field">
      <%= f.label :email %><br />
      <%= f.text_field :email, autofocus: true %>
    </div>
    <div class="field">
      <%= f.label :password %><br />
      <%= f.password_field :password %>
    </div>
    <div class="field">
      <%= f.label :password_confirmation %><br />
      <%= f.password_field :password_confirmation %>
    </div>
    <div class="actions">
      <%= f.submit "Sign up" %>
    </div>
<% end %>

After, successful signup, you should redirect user to edit page. and update other fields on edit page. Write following code in ApplicationController.

def after_sign_up_path_for(resource)
    redirect_to edit_user_path(resource)
end

Need Your Help

android: quality of the images resized in runtime

android image drawing resize draw

I want to show images using drawBitmap() method. But before I want to resize it according screen dimensions. I have a problem with quality of result image. You can see screenshots and test code bel...

Is there a pattern that allows a constructor to be called only from a specific factory and from nowhere else?

.net design-patterns

We have a class, say LegacyUserSettingsService. LegacyUserSettingsService implements an interface, IUserSettingsService.