I need one help.I need to add input field name attribute dynamically using Javascript/Jquery. I am each time creating new field by clicking on + button and delete the required field by clicking on - button.I am explaining my code below.

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=".6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src=".1.1/jquery.min.js"></script>
<link href=".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>

I need one help.I need to add input field name attribute dynamically using Javascript/Jquery. I am each time creating new field by clicking on + button and delete the required field by clicking on - button.I am explaining my code below.

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./font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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>

Here i am creating new field using + button and here i need to increment the name attribute value like questions0,questions1,questions2.... this.Suppose user delete any field then also this given order will remain with all field as name attribute value.Please help me.

• javascript
• jquery
• html

• 1 Make global variable in js. Something like questionnumber=1; and then append it to strings '...question' + questionnumber + '" id=...' – Dimava Commented Jun 22, 2016 at 13:09
• Let me understand.. If user add 2 questions, the result will question0, question. Then he delete the second and add one more. Is the result suppose to be question0, question2? – Mosh Feu Commented Jun 22, 2016 at 13:11
• suppose user added 3 question question0,question1,question2.. and deleted the middle one(i.e-question1) then it will again question0,question1 after deletion. – user5443928 Commented Jun 22, 2016 at 13:13
• If the name doesnt really matter and you just need to pass them all, you could use name="questions[]". But this would not work for id. – Hozeis Commented Jun 22, 2016 at 13:18
• why i am doing this because when i will submit form i can extract those easily in array. – user5443928 Commented Jun 22, 2016 at 13:22

4 Answers 4

Have a look attached snippet.

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

First of all, your aproach is pretty bad. It's not a good idea to put everything in a long string and place it somewhere in your JS. But, this is not your question.

Just create a new variable in your script for counting.

var count = 0;

And then increase the count in your createNew function and place the value everywhere you need it in your element string.

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

That's it.

You simply have to count the number of clicks and use that count in your script to have unique name attributes.

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

Create a global variable idCount in your script and in createNew function increment its value.

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