如何使用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.

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

Answer 2

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> 

Answer 3

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>

Answer 4

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>