CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
version 2
version 2

Reputation: 1059

Unable to generate dynamic input fields on click event in jquery

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

Upvotes: 1

Views: 170

Answers (1)

user1308286
user1308286

Reputation:

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

Upvotes: 4

Related Questions