ソースコード共有効果を備えた jQuery コピーフォーム要素 Demonstration_jquery

フォームを送信するとき、複数の異なる製品モデルを注文情報に追加したり、新しいフィールド情報をフォーム データに追加したりするなど、複数の同じフォーム要素を繰り返し追加する必要が生じることがあります。このとき、フォーム内に「項目追加」ボタンや「コピー」ボタンを直接配置し、ボタンをクリックすることでフォーム要素をコピーすることができます。

デモを見る ソースコードをダウンロード

HTML

この記事では、jQuery ベースのシンプルな要素コピー プラグインを例を通して紹介します。このプラグインを呼び出すことで要素コピー機能を簡単に実現できます。

まず、jQuery ライブラリ ファイルと要素複製プラグイン DuplicateElement.min.js を読み込みます。

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

ユーザー情報要素をコピーする必要があると仮定します。フォームの HTML 構造は次のとおりです。

<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

「コピー」ボタンをクリックすると、#Additional の内容がコピーされます。これは、最初は「コピー」ボタンのみが表示され、コピー後は元の行が表示されます。 「削除」ボタンをクリックすると、対応する行が削除されます。

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

onCreate() コールバック関数を使用して、コピーが成功した後に新しく追加されたフォーム要素の属性 (フォーム要素の値やスタイルなど) を定義することもできます。

上記の内容は、ソース コード共有効果のデモを共有した jQuery のコピー フォーム要素であり、皆様のお役に立てば幸いです。