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

Kavindra · Accepted Answer · 2017-12-06 00:29:37Z

2

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>

answered Dec 6, 2017 at 0:29

Kavindra

1,7072 gold badges15 silver badges19 bronze badges

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

2 Comments

dbJoker Over a year ago

Thanks for the correction. But I was wondering what this line do : <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Do I need it?

Kavindra Over a year ago

No, you don't need it. (I hope you have already included jQuery in your app). I included this so that the code snippet works here. Unless it won't work since we need jQuery to run the code.

dbJoker · Accepted Answer · 2017-12-07 21:08:41Z

0

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);

answered Dec 7, 2017 at 21:08

dbJoker

1731 gold badge1 silver badge13 bronze badges

Collectives™ on Stack Overflow

Ruby rails add field to form with JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related