Text aus der Form Gruppe verschütten

Question

Ich habe den folgenden Eingabebereich hinzugefügt:

('#item').after('<div class="form-group" onsubmit="return false"></div><form action="javascript:void(-1)"><label for="exampleInputEmail1"> What?</label><input type="text" class="form-control" id="InputSaleValue" placeholder="Enter value"><small id="emailHelp3" class="form-text text-muted">eg 10%</small><form onsubmit="return false"> </div>'); 

Nach Drücken der Eingabetaste, ich habe dann:

('#InputSaleValue').after('<div class="form-group" onsubmit="return false"></div><form action="javascript:void(-1)"><label for="exampleInputEmail1"> What?</label><input type="text" class="form-control" id="InputCommission" placeholder="Enter value"><small id="emailHelp3" class="form-text text-muted">eg 10%</small><form onsubmit="return false"> </div>'); 

Aber was passiert ist, ist, dass das „zB 10% "wird zweimal am Ende des zweiten Zusatzes hinzugefügt und nicht für jeden Zusatz separat.

Answer 1

Es passiert, weil Sie in Ihrer zweiten Codezeile die Vorlage nach #InputSaleValue hinzufügen, das ist nur das Eingabefeld & nicht die Bezeichnung, z. B. 10% enthalten. Dein Inhalt erscheint also direkt neben diesem Feld. Vielleicht möchten Sie die erste Zeile ändern:

$('#item').after('<div class="form-group" onsubmit="return false"></div><form action="javascript:void(-1)"><div id="saleField"><label for="exampleInputEmail1"> What?</label><input type="text" id="InputSaleValue" class="form-control" placeholder="Enter value"><small id="emailHelp3" class="form-text text-muted">eg 10%</small></div></form onsubmit="return false"> </div>'); 

und zweite Linie als

$('#saleField').after('<div class="form-group" onsubmit="return false"></div><form action="javascript:void(-1)"><label for="exampleInputEmail1"> What?</label><input type="text" class="form-control" id="InputCommission" placeholder="Enter value"><small id="emailHelp3" class="form-text text-muted">eg 10%</small><form onsubmit="return false"> </div>'); 

In erster Linie habe ich gerade das Feld einschließlich Etikett eingeschlossen, zB 10 innerhalb div mit id als saleField. Und in der zweiten Linie habe ich nur den Auswähler gemacht. Hier Link für die Arbeit Plunker: https://plnkr.co/edit/noxcWTmAaLwtYv8vx2CO?p=preview

Answer 2

Try this:

$(function(){ 
 
$('#item').after('<form action="javascript:void(-1)" class="form-group" id="formArea" onsubmit="return false"><div class="form-group"><label for="inputSaleValue"> What?</label><input type="text" class="form-control" id="inputSaleValue" placeholder="Enter value"><small class="form-text text-muted">eg 10%</small></div></form>'); 
 

 
$('#inputSaleValue').on('keydown',function(e){ 
 
\t if ((e.which == 13 || e.keyCode == 13) && $(this).val() != '') { 
 
\t \t e.preventDefault(); 
 
\t \t $('#formArea').append('<div class="form-group"><label for="inputCommission"> What?</label><input type="text" class="form-control" id="InputCommission" placeholder="Enter value"><small class="form-text text-muted">eg 10%</small></div>'); 
 
\t } 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 

 
<div id="item"></div>