jQuery table input in rails app

Question

In my app i have a form with 4 fields that records information about a friend. (see screenshot)

At the bottom i have a button that dynamically duplicates the form should the user want to enter another record.

They way i have it setup is sort of messy and will be extremely long should the user want to add lots of records.

Is there a cleaner way to do this? Maybe some sort of jquery table?

enter image description here

View code:

<div id="single_module">
<div class="pitch">
<h2>Step 3: Friends Birthdays</h2>
</div>
<form id="myForm">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
<%= simple_form_for @user, url: wizard_path do |f| %>

  <div class="inputs">
  <ul class="testss1">
  <%= f.simple_fields_for :friends do |friend_f| %>
    <li>
    <%= friend_f.input :name %>
    </li>
    <li>
    <%= friend_f.input :dob, :as => :date_picker, :label => 'Birthday', :input_html => { :class => 'special' } %>
    <li>
    <%= friend_f.input :gender, :collection => ['male','female'] %></li>
    </li><li>
    <%= friend_f.association :interests, :as => :select, :label => false %></li>


    <%end%>

    </div>
    <div>
    <input type="button" id="btnAdd" value="add another name" />
    <input type="button" id="btnDel" value="remove name" />
    </div>
    </form>
    <div class="actions">
    <%= f.button :submit, 'Next Step', :class => 'btn btn-primary',  %>
    <br></br>
    </div>
    <%end%>

Frenchi In LA · Accepted Answer · 2012-05-25 20:32:14Z

2

do you save each time when is done, add another friend click? why not to save you data even in temporary hidden field, then clear all data in your form and let user add another record?

answered May 25, 2012 at 20:32

Frenchi In LA

3,1694 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

js111 Over a year ago

No it does not save to the database until the final is submitted.. how would that work with the hidden fields is say the user adds 20 people? Is there a plugin that can be used or hacked to get this done?

Frenchi In LA Over a year ago

in this case you can just hide your table, duplicate a new table,and show the new one. Better even make 2 table at the beginning, hide the second one, then if user wants to add a new one duplicate the hidden one insert it at the end and hide it the last one and show the hidden one. That's way you don't have to clear your controls

js111 Over a year ago

do you know of any existing plugins or tutorials on how to do this?.. im just getting into jquery

Collectives™ on Stack Overflow

jQuery table input in rails app

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related