it-swarm.com.de

Verwendung von jQuery zum dynamischen Hinzufügen von Formularelementen

Hier ist mein HTML:

<div id="extraPerson">
    <div class="controls controls-row">
      <input class="span3" placeholder="First Name" type="text" name="firstname2">
      <input class="span3" placeholder="Last Name" type="text" name="lastname2">     
         <select class="span2" name="gender2"><option value="Male">Male</option><option           value="Female">Female</option></select>   
        ...ETC
    </div>
</div>

<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</p></a>

Und das ist meine Jquery:

<script>
    $(document).ready(function(){
        $('#addRow').click(function(){
            $("#extraPerson").slideDown();
         });
    })
</script>

Die # textPerson ist in der CSS versteckt.

Es fügt das div hinzu, wenn der Link angeklickt wird. Ich möchte jedoch, dass jedes Mal, wenn der Link angeklickt wird, das gleiche div hinzugefügt wird. Wie mache ich das? Noch besser, wenn die Nummer an die Formelnamen angehängt wird. ZB Vorname3, Vorname4 usw.

16
pgtips

Versuchen Sie es so: -

Demo

HTML

Erstellen Sie eine Vorlage extraPersonTemplate und verwenden Sie sie zum weiteren Konstruieren. Fügen Sie einen Container für Ihren Inhaltsbereich hinzu.

<div class="extraPersonTemplate">
    <div class="controls controls-row">
        <input class="span3" placeholder="First Name" type="text" name="firstname2">
        <input class="span3" placeholder="Last Name" type="text" name="lastname2">
        <select class="span2" name="gender2">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </div>
</div>
<div id="container"></div>

JS

  $(document).ready(function () {
     $('<div/>', {
         'class' : 'extraPerson', html: GetHtml()
     }).appendTo('#container'); //Get the html from template
     $('#addRow').click(function () {
           $('<div/>', {
               'class' : 'extraPerson', html: GetHtml()
     }).hide().appendTo('#container').slideDown('slow');//Get the html from template and hide and slideDown for transtion.

     });
 })
 function GetHtml() //Get the template and update the input field names
{
      var len = $('.extraPerson').length;
    var $html = $('.extraPersonTemplate').clone();
    $html.find('[name=firstname]')[0].name="firstname" + len;
    $html.find('[name=lastname]')[0].name="lastname" + len;
    $html.find('[name=gender]')[0].name="gender" + len;
    return $html.html();    
}

Kleine Css

.extraPersonTemplate {
    display:none;
}
33
PSL

Ich habe mir eine eigene Lösung ausgedacht. Viele Kommentare, aber fragen Sie gerne.

$(document).ready(function(){
        $('#addRow').click(function(){
            // get the last person and html html
            var $person = $('.person').last();
            var person = $person.html();
            // find the number
            var index = person.indexOf('firstname');
            var number = parseInt(person.substring(index+9,1));
            var next = number+1;
            // replace the number
            // for firstname
            person.replace('firstname'+number, 'firstname'+next);
            // for lastname
            person.replace('lastname'+number, 'lastname'+next);
            // for gender
            person.replace('gender'+number, 'gender'+next);
            // insert the new person after the last one
            $person.after($('<div class="person">'+person+'</div>'));            
            // get the new person
            var $new = $('.person').last();
            // hide it
            $new.hide();
            // reset the values
            $new.find('input, select').val('');
            // fade it in
            $new.slideDown();
         });
    })

Ich mag die Tatsache, dass @PSL zwar eine Vorlage verwendet, aber möglicherweise eine einfachere Lösung ist. Beachten Sie, dass Sie den Code hinzufügen müssen, um die Personennummer dort zu aktualisieren ...

Eine Geige: http://jsfiddle.net/Mk7MQ/

5
Pevara

sowohl Pevara- als auch PSL-Skripte funktionieren nicht richtig. Alle neuen Zeilennamen/-IDs sind mit denen der ersten identisch. Daher können die Werte später im Skript nicht mehr abgerufen werden. .substring(index+9,1) sollte auf .substring(index+9,index+10) korrigiert werden. aber sogar als nächstes wird immer == 2 als $ person.html (); wurde nicht wirklich verändert

hier sind 3 Lösungsoptionen: https://www.jqueryscript.net/form/jQuery-Plugin-To-Dynamically-Add-More-Form-Fields-czMore.html

https://www.codexworld.com/add-remove-input-fields-dynamically-using-jquery/

https://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery

0
Igor Demenchuk