How to add name attribute of input field dynamically using Javascript/Jquery

Question

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

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.

Make global variable in js. Something like questionnumber=1; and then append it to strings '...question' + questionnumber + '" id=...' — Dimava
– 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
– 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
– 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
– 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
– user5443928, Commented Jun 22, 2016 at 13:22

Divyesh Patoriya · Accepted Answer · 2016-06-22 13:41:35Z

1

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

edited Jun 22, 2016 at 13:41

answered Jun 22, 2016 at 13:11

Divyesh Patoriya

5183 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Hozeis Over a year ago

This would cause more than one to have the same name when you delete one, wouldnt it?

user5443928 Over a year ago

@ Divyesh : Its fine but i need to reset the name attribute value after deletion.Please read my comment above.

Divyesh Patoriya Over a year ago

Let me change as per requirement...:)

user5443928 Over a year ago

Ok @DivyeshPatoriya.

user5443928 Over a year ago

@ Divyesh Patoriya : No,Its not working as per requirement.Let me to explain again.` suppose user added 3 question question0,question1,question2.. and deleted the middle one(i.e-question1) then it will again question0,question1 after deletion`.

|

eisbehr · Accepted Answer · 2016-06-22 13:12:40Z

1

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.

answered Jun 22, 2016 at 13:12

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Comments

Dilip Nayak · Accepted Answer · 2016-06-22 13:15:54Z

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>

Geeky Ninja · Accepted Answer · 2016-06-22 13:18:48Z

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

Collectives™ on Stack Overflow

How to add name attribute of input field dynamically using Javascript/Jquery

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related