jQuery copie les éléments du formulaire avec effet de partage de code sourcemonstration_jquery

Lorsque nous soumettons un formulaire, nous rencontrons parfois le besoin d'ajouter à plusieurs reprises plusieurs mêmes éléments de formulaire, comme l'ajout de plusieurs modèles de produits différents aux informations de commande, l'ajout de nouvelles informations de champ aux données du formulaire, etc. A ce moment, nous pouvons placer un bouton « Ajouter un élément » ou « Copier » directement dans le formulaire, et copier les éléments du formulaire en cliquant sur le bouton.

Voir la démo Télécharger le code source

HTML

Dans cet article, nous présentons un simple plug-in de copie d'élément basé sur jQuery à travers un exemple. La fonction de copie d'élément peut être facilement réalisée en appelant ce plug-in.

Chargez d'abord le fichier de la bibliothèque jQuery et le plug-in de duplication d'éléments duplicateElement.min.js.

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

Nous supposons que nous devons copier les éléments d'information utilisateur. La structure html du formulaire est la suivante :

<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

Lorsque nous cliquons sur le bouton "Copier", le contenu de #additional sera copié, ce qui équivaut à ajouter une nouvelle ligne. Dans un premier temps, seul le bouton "Copier" sera affiché. Après la copie, la ligne originale s'affichera. Bouton "Supprimer", cliquez sur "Supprimer" pour supprimer la ligne correspondante.

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

Nous pouvons également utiliser la fonction de rappel onCreate() pour définir les attributs des éléments de formulaire nouvellement ajoutés après une copie réussie, tels que les valeurs ou les styles des éléments de formulaire, etc.

Le contenu ci-dessus est un élément de formulaire de copie jQuery avec une démonstration d'effet de partage de code source partagée avec vous. J'espère qu'il sera utile à tout le monde.