jQuery-Kopieren von Formularelementen mit Quellcode-Sharing-Effekt, Demonstration_jquery

Wenn wir ein Formular absenden, müssen wir manchmal wiederholt mehrere gleiche Formularelemente hinzufügen, z. B. mehrere unterschiedliche Produktmodelle zu den Bestellinformationen hinzufügen, neue Feldinformationen zu den Formulardaten hinzufügen usw. Zu diesem Zeitpunkt können wir direkt im Formular eine Schaltfläche „Element hinzufügen“ oder „Kopieren“ platzieren und die Formularelemente kopieren, indem wir auf die Schaltfläche klicken.

Demo ansehen Quellcode herunterladen

HTML

In diesem Artikel stellen wir anhand eines Beispiels ein einfaches jQuery-basiertes Elementkopier-Plugin vor. Die Elementkopierfunktion kann einfach durch Aufrufen dieses Plug-Ins realisiert werden.

Laden Sie zunächst die jQuery-Bibliotheksdatei und das Elementduplizierungs-Plug-in „duplicateElement.min.js“.

<script src="jquery.js"></script> 
<script src="duplicateElement.min.js"></script> 

Wir gehen davon aus, dass wir Benutzerinformationselemente kopieren müssen. Die HTML-Struktur des Formulars ist wie folgt:

<form id="myform" name="myform" action="post.php" method="post"> 
  <fieldset id="additional"> 
    <label for="name">客户姓名：</label> 
    <input id="name" name="name[]" type="text" class="input" > 
    <label for="flag">客户级别：</label> 
    <select id="flag" name="flag[]"> 
      <option disabled="" selected="">请选择</option> 
      <option value="1">VIP</option> 
      <option value="2">普通</option> 
     </select> 
      <a href="javascript:void(0);" class="btn remove">移除</a> 
      <a href="javascript:void(0);" class="btn create">复制</a> 
    </fieldset> 
    <br/> 
    <div class="sub_btn"> 
      <input type="submit" class="button" value="提交"> 
    </div> 
</form> 

jQuery

Wenn wir auf die Schaltfläche „Kopieren“ klicken, wird der Inhalt in #additional kopiert, was dem Hinzufügen einer neuen Zeile entspricht. Zunächst wird nur die Schaltfläche „Kopieren“ angezeigt. Nach dem Kopieren wird die ursprüngliche Zeile angezeigt Klicken Sie auf die Schaltfläche „Entfernen“. Klicken Sie auf „Entfernen“, um die entsprechende Zeile zu entfernen.

 $(function () { 
    $('#additional').duplicateElement({ 
      "class_remove": ".remove", 
      "class_create": ".create", 
      onCreate: function (el) { 
        el.find("select").prop('defaultSelected'); 
        el.find(".input").val(''); 
      } 
    }); 
  }); 

Wir können auch die Rückruffunktion onCreate() verwenden, um die Attribute der neu hinzugefügten Formularelemente nach erfolgreichem Kopieren zu definieren, z. B. Formularelementwerte oder -stile usw.

Bei dem oben genannten Inhalt handelt es sich um ein jQuery-Kopierformularelement mit einer Demonstration des Quellcode-Sharing-Effekts. Ich hoffe, dass es für alle hilfreich ist.