How to show a form on load

Question

How to show form on load. Now I can see form fields on click of button (add keyskills). I want all function to be work together.On load i want to see the form and onclick 'add key skill' or 'remove key skill' it should add and remove(now on click of add or remove it is working, but not sees the form on load, only on click of 'add key skill' i can see the form)

$(function()
{
    function check_to_hide_or_show_add_key_skill_link()
    {
        if ($('#key_skills .nested-fields:visible').length == 4) {
            $('#key_skills .links a').hide();
        } else {
            $('#key_skills .links a').show();
        }
    }

    $('#key_skills').on('cocoon:after-insert', function()
    {
        check_to_hide_or_show_add_key_skill_link();
    });

    $('#key_skills').on('cocoon:after-remove', function()
    {
        check_to_hide_or_show_add_key_skill_link();
    });

    check_to_hide_or_show_add_key_skill_link();
});

My form Key Skills*

<div id="key_skills">
  <%= f.simple_fields_for :key_skills do |key_skill| %>
    <div class="nested-fields">
      <div class="field">
        <%= f.input :name , input_html: { class: 'form-control keySkill', required: true }%>
          <%= f.input :relevant_experience, input_html: { class: 'form-control', required: true } %>
            <%= link_to_remove_association "Remove Skill", f %>
      </div>
    </div>
    <% end %>
      <div class="links">
        <%= link_to_add_association 'Add Key Skill', f, :key_skills, class: "links" %>
      </div>
</div>

This is my current output now. On click of add key skill i will get form,but i want it on load)

Answer 1

Since you do not provide a lot of information, I have no idea what the name of the top-element is, but let us assume it is a Job and a job has many key_skills .

In your JobsController there is a create method, more or less as follows:

def create
  @job = Job.new 
end 

if you want to immediately add a key-skill to fill in you can just write

def create
  @job = Job.new 
  @job.key_skills.build 
end 

(which will add an empty key-skill to fill in).

Related issue on cocoon-repository: https://github.com/nathanvda/cocoon/issues/420