When we encountered a submission form,Need us to add several forms repeatedly,Add multiple different models of product information to the order form.At this time there is a copy form form button,Which is adding a new item,Add a new item by clicking the copy button,How does it work?Below we share with you,

When we submitted the form,Sometimes you encounter the need to add multiple identical form elements repeatedly,For example, you need to add multiple products of different models to the order information, and add field information to the form data.At this time, we can directly place a "new item" or "copy" button in the form, and click the button to copy the form elements.


In this article, we introduce a simple jquery-based element copy plugin through an example.Element replication is easily implemented by calling this plugin.

First load the jquery library file and duplicateelement.min.js.

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

We assume that we need to copy the user information element,The form html structure is as follows:

<form name="myform" action="post.php" method="post">
    <label for="name">Customer Name:</label>
    <input name="name []" type="text">
    <label for="flag">Customer level:</label>
    <select name="flag []">
      <option disabled="" selected="">Please select</option>
      <option value="1">vip</option>
      <option value="2">ordinary</option>
      <a href="javascript:void (0);">remove</a>
      <a href="javascript:void (0);">Copy</a>
    <br />
      <input type="submit" value="submit">


When we click the "Copy" button, the content in #additional is copied,Is equivalent to adding a new line,Initially only the "Copy" button is displayed. After copying,The original one displays the "Remove" button. Click "Remove" to remove the corresponding row.

$(function () {
    $("#additional"). duplicateelement ({
      "class_remove":".remove",      "class_create":".create",      oncreate:function (el) {
        el.find ("select"). prop ("defaultselected");
        el.find (". input"). val ("");

We can also use the oncreate () callback function to define after the replication is successful,New form element attributes,Such as form element values ​​or styles.

  • Previous Modify the default port number of tomcat
  • Next Explain in detail the operation of JavaScript on Date objects (generate an array with a countdown of 7 days)