Unable to generate dynamic input fields on click event in jquery

Question

I have a simple HTML form which contains 5 input fields for adding company details. The HTML form is designed using Twitter-Bootstrap and is kept hidden initially. Along with the form I have two div tags- Clicking on one div tag (div tag with content- Click to Generate Company forms) displays the HTML form and clicking on it again generates the same form once again & again so that the user can add multiple company details together. The other div tag is used to remove an added HTML form.

I am able to produce the hidden form only once. I am not able to generate it again & again.

I have added a fiddle to show what I have achieved so far.

Here's the jQuery code.

    $(document).ready(function(){

// Function to count total no. of company details added upon clicking add company div.
    if($('#start_count_value').val())
    {
    var i= $('#start_count_value').val();
    }
    else 
    {
    var i=0;
    }

// Function to show add company details form section upon clicking add company div.
    $("#add_company").click(function(){
    $('#add_company_div').before($("#add_company_div").clone().attr("id","add_company_div" + i));
    $("#add_company_div" + i).css("display","block");
    $("#add_company_div" + i + " :input").each(function(){
    $(this).attr("name",$(this).attr("name") + i);
    $(this).attr("id",$(this).attr("id") + i);
    $(this).attr("count",i);   
    });
    $("input[name=class_count]").remove();
    $('#add_company_div').append('<input type="hidden" class="class_count" name="class_count" value="'+i+'" />');     
    });

// Function to hide add company details form section upon clicking close div.
    $(document).on("click","#hide_company",function() {
    $(this).closest(".addcomp").remove();  
    });
    });

Below given is my HTML code:

<div id="add_company_div" class="addcomp" style='display: none;'>
  <div class="col-sm-6 col-xs-12 own_pad">
    <input class="form-control input-sm" id="company_name" count="" type="text" name="company_name" placeholder="Company Name" >
  </div>
  <div class="col-sm-6 col-xs-12 own_pad">
    <div class="input-group">
      <input type="text" name="starting_date" class="form-control input-sm pull-right" id="start_date" placeholder="Starting Date" >
    </div>
  </div>
  <div class="col-sm-6 col-xs-12 own_pad">
    <input type="text" placeholder="No.of Employees" name=emp" id="emp" class="form-control input-sm">
  </div>
  <div class="col-sm-6 col-xs-12 own_pad">
    <input class="form-control input-sm" id="addr" type="text" name="addr" placeholder="Address" >
  </div>
  <div class="col-sm-6 col-xs-12 own_pad">
    <div class="input-group"> 
      <input id="offc_email" type="text" name="offc_email" class="form-control input-sm" placeholder="Company Email" >
    </div>
  </div>
  <div id="hide_company" class="col-sm-6 col-xs-12 own_pad minus">
    Click this DIV to Close
  </div>
</div>
<input type="hidden" id="start_count_value"  name="start_count_value" value="" />   
<input type="hidden" name="class_count" class="class_count" value="" />
<div class="box-footer clearfix no-border no_pad comp-foot">
  <div id="add_company" class="btn btn-success btn-sm pull-left"><i class="fa fa-plus"></i> Click to Generate Company Forms</div>
</div>

Can anyone tell where I made the mistake??

LINK TO FIDDLE

score 4 · Accepted Answer · 2015-03-13 11:52:50Z

4

You forgot to increment i after you added a form. Add i++; at the end of your click handler like this:

$("#add_company").click(function(){
    $('#add_company_div').before($("#add_company_div").clone().attr("id","add_company_div" + i));
    $("#add_company_div" + i).css("display","block");
    $("#add_company_div" + i + " :input").each(function(){
        $(this).attr("name",$(this).attr("name") + i);
        $(this).attr("id",$(this).attr("id") + i);
        $(this).attr("count",i);   
    });
    $("input[name=class_count]").remove();
    $('#add_company_div').append('<input type="hidden" class="class_count" name="class_count" value="'+i+'" />');
    i++;
 });

edited Mar 13, 2015 at 11:52

answered Mar 13, 2015 at 11:35

user1308286

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

2 Comments

version 2 Over a year ago

This ain't right. It produces different id's to the input fields. Instead of company_name0, starting_date0, emp0, addr0, offc_email0 for a form, it is generating company_name0, starting_date1, emp2, addr3, offc_email4. So when more companies are added, i won't be able to store them together. I won't be able to fetch them in my php code. @Marc Berghaus

user1308286 Over a year ago

@Fyou You are right, i positioned the i++ wrong. I did´nt see the each because of the missing indentation ;) See my updated answer.

Collectives™ on Stack Overflow

Unable to generate dynamic input fields on click event in jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related