我想用计数器附加我的每个输入名称属性

时间:2017-10-14 04:33:41

标签: javascript jquery html

我的代码将隐藏的div附加到另一个div上按钮单击隐藏的div有一个表单我想要每个按钮点击名称应该有一个计数器值

var i=0;
$(document).ready(function() {
  $("#addNew").click(function() {
    i++;
    var maindiv=document.getElementById('nestedFeilds').innerHTML;
    $("#nestedFeilds :input").each(function() {
      var orignalname=$(this).attr('name');
      $(this).attr('name', orignalname + i);
    }
    );
    $("#showhere").append(maindiv);
  }
  );
}

);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row" id="mainContainer">
  <div class="col-md-1 col-xs-4">
    <label for="Education">Education</label>
  </div>
  <div class=class="col-md-8 col-xs-8  verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none">
    <a href="" style="color: red;margin-left: auto; ">Delete Education</a>
    <input type="text" placeholder="School Name" class="form-control" id="School_Name" required="" name="School_Name[]"> |
    <br>
    <input type="text" placeholder="Feild of Study" class="form-control" id="feild_Name" required="" name="feild_Name[]">
    <br>
    <input type="text" placeholder="Degree" class="form-control" id="Degree_Name" required="" name="Degree_Name[]">
    <br>
  </div>
</div>
<div class="row" id="2ndmainContainer">
  <div class="col-md-1 col-xs-4"></div>
  <div class="col-md-8 col-xs-8  verticalLine" id="showhere" style=" margin-left: 10px ;float:left;"></div>
  <div style="margin-left: 120px; float:left;"><a id="addNew"> Add Education</a></div>
</div>
</form>
</div>
</div>
<div class="col-xs-2">
</div>
</div>
</div>

现在发生的事情是我得到了这样的名字属性

School_Name_0
School_Name_01
School_Name_02

1 个答案:

答案 0 :(得分:1)

如果问题是如何获得School_Name_0,School_Name_1,School_Name_2等,只需在添加计数器值之前删除字符串的最后一个字符:

$(this).attr('name', orignalname.substring(0, orignalname.length - 1) + i);