Rails: jQuery adding and removing fields in form

Question

I'm trying to add new fields in a form using jQuery.

This is new.html.erb

<%= form_for @hour do |f| %>
  <div id="hourSet">
    <%= render partial: "hours_form" %>
  </div>

  <a href="javascript:;" id="addNewHour">Add Hours</a>

  <div class="hide" id="new_hours_form">
    <%= render partial: "hours_form", locals: {hour: false} %>
  </div>
</div>

js file

$(document).ready ->
  $("#addNewHour").on "click", ->
    $("#hourSet").append $("#new_hours_form").html()

  $("#removeNewHour").on "click", ->
    $("#hourSet").remove()

_hours_form.html.erb

<div class="hoursForm">
  <%= label_tag 'day' %>
  <%= text_field_tag 'day[]' %>
  <%= label_tag 'open_time' %>
  <%= text_field_tag 'open_time[]' %>
  <%= label_tag 'close_time' %>
  <%= text_field_tag 'close_time[]' %>  

  <a href="#" id="removeNewHour">X</a>
</div>

When I'm trying to populate the fields, only the first X works, and it deletes all the fields. I like to only delete 1 at a time. Whats a best method to add unique ids and get those ids for easy removal?

Thanks!

do you have id field inside @hour object. If so i think u can use it to make div unique. ex: <div id="hourset<%= @hour.id%>">... </div> — Dave
– Dave, Commented Apr 19, 2014 at 18:13
@Dave would @hour.id only work if there was an id (for existing data?). Since I'm adding new data, there wouldn't be @hour.id that exists yet? — hellomello
– hellomello, Commented Apr 19, 2014 at 18:26
you are correct. how about using a javascript counter variable appended to id with underscore between them. on each click of #addNewHour increment counter variable and decrement counter on click of #removeNewHour. while retrieving we can split using underscore and get id of div to be removed. — Dave
– Dave, Commented Apr 19, 2014 at 18:36

Dave · Accepted Answer · 2014-04-19 18:56:47Z

3

Here is the jsfiddle you can refer and alter your code accordingly. I have used closest method of jquery for removel purpose. If this is useful then i don't think there is necessity for unique ids.

$(this).closest('.hoursForm').remove();

answered Apr 19, 2014 at 18:56

Dave

4,4363 gold badges27 silver badges38 bronze badges

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

1 Comment

hellomello Over a year ago

Thanks, this one helped me lots!

roshiro · Accepted Answer · 2014-04-19 18:35:12Z

1

The reason the first "X" delete link works is because your javascript attaches the click events at document ready. And at that moment, you just have your first "X" in the screen.

To fix that you can attach events using delegate instead of on. And you shouldn't need to assign id to each X links. Your JS could look like this:

$(document).ready ->
  // Keep the same here
  $("#addNewHour").on "click", ->
    $("#hourSet").append $("#new_hours_form").html()

  // This code below handles the click on the delete link ("X")
  $('.hoursForm').delegate "a", "click", ->
    $(this).parent().remove()

Hope that works.

answered Apr 19, 2014 at 18:35

roshiro

7801 gold badge5 silver badges9 bronze badges

1 Comment

hellomello Over a year ago

I thought this would work, but its not doing anything on the new fields (when I click on Add Hours), however, it works on the first hoursForm container when I click on the X (from the first hoursForm container)

dbucki · Accepted Answer · 2014-04-19 19:01:39Z

0

try change js

$(document).ready(function(){
  $("#addNewHour").click(function(e){
    e.preventDefault();
    $("#hourSet").append($("#new_hours_form").html());
  });
});

var removeHours = function(elem){
       $(elem).parent().remove();
};

and change html in #removeNewHour -> add attribute onclick="removeHours(this); return false;"

edited Apr 19, 2014 at 19:01

answered Apr 19, 2014 at 18:26

dbucki

4643 silver badges7 bronze badges

3 Comments

hellomello Over a year ago

is there a way to create a unique id with jquery? Because the id removeNewHour only works on the first link when I continue to add new hours.

dbucki Over a year ago

you can e.g. set timestamp as id $("#hourSet").append($($("#new_hours_form").html()).attr('id',new Date().getTime()));

roshiro Over a year ago

@dbucki I'm afraid only the last child will be removed according to your code.

Collectives™ on Stack Overflow

Rails: jQuery adding and removing fields in form

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related