Formularfelder mit jQuery hinzufügen

Die Frage, die schon 1000 mal gestellt und beantwortet wurde 😀 Ich kann kein JS und musste selbst suchen und probieren bis es einigermaßen geklappt hat. Ausschlaggebend war das folgende, einfache und kleine Script.

http://jsfiddle.net/fkvBt/

Zur Anwendung in einem Bootstrap-Formular musste ich es etwas modifizieren. Hier sind ein paar mehr DIVs im Spiel.

<div class=“input form-group“>
<label for=“einheit“>Einheit <span class=“number“>1</span></label>
<div class=“row“>
<div class=“col-sm-8″>
<input type=“text“ class=“form-control“ id=“einheit“ name=“einheit[]“>
</div>
<div class=“col-sm-3″>
<input type=“text“ class=“form-control“ id=“einheit“ name=“text[]“>
</div>
<div class=“col-sm-1″>
<input type=“text“ class=“form-control“ id=“einheit“ name=“text[]“>
</div>
</div>
</div>

Im Script muss nun der Name des input-Divs angepasst werden, ich habe da noch form-group integriert, und beim onclick zum entfernen funktioniert parent() nicht, also suche ich mit closest()

<script language=“JavaScript“>
$(function(){
$(‚#add‘).on(‚click‘,function(){
var fields = $(‚#form‘).find(‚.input.form-group‘).length+1;
var html ='<div class=“input form-group“><label for=“einheit“>Einheit <span class=“number“>’+fields+'</span></label><div class=“row“><div class=“col-sm-7″><input type=“text“ class=“form-control“ id=“einheit“ name=“einheit[]“></div><div class=“col-sm-3″><input type=“text“ class=“form-control“ id=“einheit“ name=“qm[]“></div><div class=“col-sm-1″><a class=“btn btn-default“ id=“remove“ role=“button“>-</a></div></div></div>‘;
$(„#add“).before(html)
})

$(‚#form‘).on(‚click‘,’#remove‘,function(){
$(this).closest(‚.input.form-group‘).remove();
$(‚#form‘).find(‚.input.form-group‘).each(function(i){
$(this).find(‚.number‘).text(i+1);
})
})
})
</script>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.