Question

我有一个简单的HTML表单，其中包含5个用于添加公司详细信息的输入字段。 HTML表单使用Twitter-Bootstrap设计，最初保持隐藏状态。与表单一起，我有两个div标签 - 单击一个div标签（带有内容的div标签 - 单击生成公司表单）显示HTML表单并再次单击它再次生成相同的表单＆amp;再次，以便用户可以一起添加多个公司详细信息。另一个div标签用于删除添加的HTML表单。

我只能制作一次隐藏的表格。我无法再次生成它＆amp;试。

我添加了一个小提琴来展示我到目前为止取得的成就。

这是jQuery代码。

    $(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();  
    });
    });

以下是我的HTML代码：

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

谁能告诉我犯了哪里错误？

LINK TO FIDDLE

Answer 1

添加表单后忘记增加i。在点击处理程序的末尾添加i++;，如下所示：

$("#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++;
 });

无法在jquery中的click事件上生成动态输入字段

1 个答案: