如何使用 Javascript/Jquery 动态添加输入字段的名称属性答案

【问题标题】：How to add name attribute of input field dynamically using Javascript/Jquery如何使用 Javascript/Jquery 动态添加输入字段的名称属性
【发布时间】：2016-06-22 13:02:18
【问题描述】：

我需要一个帮助。我需要使用 Javascript/Jquery 动态添加输入字段名称属性。我每次都通过单击+ 按钮创建新字段，并通过单击- 按钮删除必填字段。我在下面解释我的代码。

function createNew(evt){
  $('#questionshowp1').append('<div class="form-group"><input name="questions1" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);"><i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)"><i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
  $(evt).css('display', 'none');
  $(evt).siblings("button.btn-danger").css('display', 'block');
}
function deleteNew(evnt){
  $(evnt).closest(".form-group").remove();
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="questionshowp" id="questionshowp1">
  <div class="form-group">
    <input name="questions0" id="questions0" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
    <div class="secondsec">
      <button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);"><i class="fa fa-plus" aria-hidden="true"></i></button>
      <button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;display:none;" onclick="deleteNew(this)"><i class="fa fa-minus" aria-hidden="true"></i></button>
    </div>                                                            
  </div>
</div>

在这里我使用+ 按钮创建新字段，在这里我需要增加名称属性值，例如questions0,questions1,questions2.... this。假设用户删除任何字段，那么这个给定的顺序也将保留所有字段作为名称属性值。请帮帮我。

【问题讨论】：

在js中制作全局变量。像questionnumber=1; 这样的东西，然后将其附加到字符串'...question' + questionnumber + '" id=...'
让我明白.. 如果用户添加2个问题，结果将question0, question。然后他删除了第二个并添加了一个。结果是否假设为question0, question2？
假设用户添加了3问题question0,question1,question2..并删除了中间的问题（i.e-question1），那么删除后它会再次question0,question1。
如果名字并不重要，你只需要传递它们，你可以使用name="questions[]"。但这不适用于 id。
我为什么要这样做，因为当我提交表单时，我可以轻松地将它们提取到数组中。

标签： javascript jquery html

【解决方案1】：

看看附加的sn-p。

function createNew(evt){
  var cur=$("input:text").length+1;
  
     $('#questionshowp1').append('<div class="form-group"><input name="questions'+cur+'" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
     $(evt).css('display', 'none');
     $(evt).siblings("button.btn-danger").css('display', 'block');
  var i=0;
   $('input[type="text"]').each(function(){
      $(this).attr('name', 'questions' + i); 
      $(this).attr('id', 'questions' + i); 
     i++;
  });
}
function deleteNew(evnt){
     $(evnt).closest(".form-group").remove();
   var i=0;
   $('input[type="text"]').each(function(){
      $(this).attr('name', 'questions' + i); 
      $(this).attr('id', 'questions' + i); 
     i++;
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionshowp" id="questionshowp1">
<div class="form-group">
<input name="questions0" id="questions0" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;display:none;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button>
</div>                                                            
 </div>
 </div>

【讨论】：

这会导致当你删除一个时会有多个同名，不是吗？
@Divyesh：很好，但我需要在删除后重置名称属性值。请阅读我上面的评论。
让我按要求改...:)
好的@DivyeshPatoriya。
@Divyesh Patoriya ：不，它不能按要求工作。让我再解释一下。`假设用户添加了 3 个问题 question0,question1,question2.. 并删除了中间一个（即-question1）然后它会再次问题0，删除后的问题1`。

【解决方案2】：

首先，你的方法很糟糕。将所有内容放在一个长字符串中并将其放在 JS 中的某个位置并不是一个好主意。但是，这不是你的问题。

只需在脚本中创建一个用于计数的新变量。

var count = 0;

然后增加 createNew 函数中的计数，并将值放在元素字符串中任何需要它的位置。

++count;
'<input name="questions' + count + '" id="questions' + count + '"'

就是这样。

【讨论】：

【解决方案3】：

您只需count点击次数并在您的脚本中使用该计数来获得唯一的名称属性。

<script type="text/javascript">
        var clicks = 0;
        function createNew() {
            clicks += 1;
            var ques = "questions" + clicks;
             $('#questionshowp1').append('<div class="form-group"><input name='+ques+'  id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);"><i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)"><i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
     $(evt).css('display', 'none');
     $(evt).siblings("button.btn-danger").css('display', 'block');
        };
        </script>

【讨论】：

【解决方案4】：

在您的脚本中创建一个全局变量idCount，并在createNew 函数中增加其值。

var idCount = 0;
function createNew(evt){
  idCount++;
     $('#questionshowp1').append('<div class="form-group"><input name="questions'+idCount+'" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
     $(evt).css('display', 'none');
     $(evt).siblings("button.btn-danger").css('display', 'block');
}
function deleteNew(evnt){
     $(evnt).closest(".form-group").remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionshowp" id="questionshowp1">
<div class="form-group">
<input name="questions0" id="questions0" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;display:none;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button>
</div>                                                            
 </div>
 </div>

【讨论】：