Ruby rails add field to form with JavaScript

Question

I am using ruby on rails and JavaScript. I want to create a form in which one field can have more than one "object". In my example an employee can add multiple formations.

Just to let you know, I don't know much in JavaScript and I am not an expert in Web languages. So please explain to me what are my problems in the following code.

This is the code in my employe _form.html.erb

<div id="formationSet" class="form-group row"> </div> <a href="javascript:" id="addNewFormation">Add Formations</a> 

this is my code in employeFormation.js

$(document).ready(function(){ $('#addNewFormation').click(function(){ $('div#formationSet').append('<div class ="FormationsForm"><input type="text" class="input-large" placeholder="Caption">'+ '<button class="removeNewFormation" type="button">remove</button> </div>'); }); $("div#formationSet").on('click', '.removeNewFormation', function(){ $(this).closest('.FormationsForm').remove(); }); }); 

and this is my code in application.js

//= require employeFormation 

what I actually want is that when I click on addFormation its add a field below the other and I can remove it and is added to my object when I create the new employee

Thanks you for your answer.

Edit: corrected some typo in the code (thanks to KKK). But its still not working

Answer 1

The problem in your code was that you refer a wrong id in javascript. In your HTML the id is FormationSet and in javascript you try to append form into formationSet div. Change the id in HTML and it works fine.

$(document).ready(function(){ $('#addNewFormation').click(function(){ $('div#formationSet').append('<div class ="FormationsForm"><input type="text" class="input-large" placeholder="Caption">'+ '<button class="removeNewFormation" type="button">remove</button> </div>'); }); $("div#formationSet").on('click', '.removeNewFormation', function(){ $(this).closest('.FormationsForm').remove(); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="formationSet" class="form-group row"> </div> <a href="javascript:" id="addNewFormation">Add Formations</a>

Answer 2

Above ruby 4.0 aparently $(document).ready dont get notify as before. So I had to change it like this:

var ready = function() { $('#addNewFormation').click(function(){ $('div#formationSet').append('<div class ="FormationsForm"> <%= f.label :email %> \n <%= f.text_field :email %>' + '<button class="removeNewFormation" type="button">remove</button></div>'); }); $("div#formationSet").on('click', '.removeNewFormation', function(){ $(this).closest('.FormationsForm').remove(); }); }; $(document).ready(ready); $(document).on('page:change', ready);