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