Wie Name Attribut des Eingabefeldes dynamisch mit Javascript/Jquery

Question

hinzufügen Ich brauche eine Hilfe. Ich muss Eingabefeld Name Attribut dynamisch mit Javascript/Jquery hinzufügen. Ich erstelle jedes Mal ein neues Feld, indem ich auf die Schaltfläche + klicke und das gewünschte Feld lösche, indem ich auf die Schaltfläche klicke. Ich erläutere meinen Code unten.

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>

Hier bin ich die Schaffung neuer Bereich + Taste, und hier muss ich den Namen Attributwert erhöhen, wie questions0,questions1,questions2.... this.Suppose Benutzer ein beliebiges Feld löschen dann auch dies gegeben, um mit allen bleiben Feld als Name Attributwert. Bitte helfen Sie mir.

Answer 1

Schauen Sie sich das angehängte Snippet an.

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 2

Zunächst einmal ist Ihr aproach ziemlich schlecht. Es ist keine gute Idee, alles in einen langen String zu setzen und es irgendwo in deinem JS zu platzieren. Aber das ist nicht deine Frage.

Erstellen Sie einfach eine neue Variable in Ihrem Skript zum Zählen.

var count = 0; 

Und dann die Zählung in Ihrer createNew Funktion erhöhen und den Wert setzen überall Sie es in Ihrem Element Zeichenfolge benötigen.

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

Das ist es.

Answer 3

Sie müssen einfach count die Anzahl der Klicks und verwenden Sie diese Anzahl in Ihrem Skript, um eindeutige Namensattribute zu haben.

<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

Erstellen Sie eine globale Variable IDCOUNT in Ihrem Skript und in createNew Funktion ihren Wert erhöhen.

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>