Wie fügen Sie das Attribut name des input-Feldes dynamisch mit Javascript/Jquery

Ich brauche eine Hilfe.Ich muss hinzufügen Eingabefeld name-Attribut dynamisch mit Javascript/Jquery. Ich bin jedes mal erstellen neues Feld, indem Sie auf + - Taste, und löschen Sie das gewünschte Feld, indem Sie auf - - Taste.Ich bin zu erklären, mein code unten.

JS:

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();
}

HTML:

<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 erstellen neues Feld mit + - Taste und hier muss ich erhöhen Sie den name-Attributwert wie questions0,questions1,questions2.... diese.Angenommen, Benutzer löschen Feld dann auch diese Reihenfolge wird bleiben mit allen Feld-name Attribut-Wert.Bitte helfen Sie mir.

Globale variable in js. So etwas wie questionnumber=1; und dann fügen Sie es zu strings '...question' + questionnumber + '" id=...'
Lassen Sie mich verstehen.. Wenn Benutzer hinzufügen, 2 Fragen, das Ergebnis wird question0, question. Dann hat er die zweite entfernen und fügen Sie eine weitere. Ist das Ergebnis wohl zu question0, question2?
angenommen, der Benutzer Hinzugefügt 3 Frage question0,question1,question2.. gelöscht und die mittlere (i.e-question1), dann wird es wieder question0,question1 nach dem löschen.
Wenn der name nicht wirklich wichtig sind und die Sie gerade brauchen, um passieren Sie alle, die Sie nutzen könnten name="questions[]". Aber das würde nicht funktionieren für id.
warum ich Tue dies, weil, wenn ich ein Formular Einreichen, die ich extrahieren, können diese einfach in der Reihe.

InformationsquelleAutor | 2016-06-22

Haben Sie einen Blick angehängte snippet.

JS:

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++;
  });
}

HTML:

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

Dies würde bewirken, dass mehr als einer den gleichen Namen haben, wenn Sie zu löschen, würde nicht es?
Divyesh : Sein feines, aber ich zurücksetzen müssen, das name-Attribut mit dem Wert nach dem löschen.Bitte Lesen Sie meinen Kommentar oben.
Lassen Sie mich ändern, je nach Bedarf...:)
Ok @DivyeshPatoriya.
Haben Sie einen Blick aktualisierten code ... !
Divyesh Patoriya : Nein,es funktioniert nicht wie pro Anforderung.Lassen Sie mich nochmal zu erklären.` angenommen, der Benutzer Hinzugefügt 3 Frage question0,question1,question2.. und gelöscht, der in der Mitte(ich.e-question1), dann wird es wieder question0,question1 nach dem löschen`.
Hast du überprüft ?
Seine stets in der Reihenfolge. question0,question1,question2 question3 und wenn wir löschen question2, dann wird es question0,question1,question2 .. Ist das richtig?

InformationsquelleAutor Divyesh Patoriya

1

Zuerst, Ihre Zufahrt ist ziemlich schlecht. Es ist nicht eine gute Idee, um alles in eine lange Zeichenfolge, und legen Sie es irgendwo in Ihrem JS. Dies ist aber nicht Ihre Frage.

Erstellen Sie einfach eine neue variable in Ihrem Skript zum zählen.
```
var count = 0;
```
Und dann erhöhen Sie die Anzahl in Ihrem createNew Funktion und den Wert überall Sie es brauchen in Ihrem element string.
```
++count;
'<input name="questions' + count + '" id="questions' + count + '"'
```
Das ist es.

InformationsquelleAutor eisbehr

Müssen Sie einfach count die Anzahl der Klicks
und verwenden, die zählen in Ihrem Skript haben eindeutige Namen Attribute.

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

InformationsquelleAutor Dilip Nayak

Erstellen Sie eine Globale variable idCount im Skript und in createNew Funktion erhöhen Sie dessen Wert.

JS:

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();
}

HTML:

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

InformationsquelleAutor Geeky Ninja

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.