Clone form, add new each one

2019-07-18 18:10发布

站内问答 / JavaScript
713 4 5

I need to add one by one form when I click the button, but in the second click the function appends more than one form.

What am I doing wrong in my script?

Thanks

$('.add-more-btn').click(function() {
  var clone = $('.form-main').clone('.form-block');
   var   block = $('.form-block')
  $(block).append(clone);
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <title>Clone forms</title>
</head>
<body>
<div class="container">
  <div class="row">
  <div class="col-xs-12">
    <form class="form-main">
      <div class="form-block">
        <div class="form-group">
          Name
        <input type="text" name="name[]" class="form-control">
        </div>
        <div class="form-group">
          Email
        <input type="text" name="email[]" class="form-control">
        </div>
        <hr>
      </div>
    </form>
    <a class="btn btn-primary add-more-btn">Add one</a>
  </div>
</div>
</div>

4条回答
Melony?
2楼-- · 2019-07-18 18:26

Because using the clone method on a css class every div container with the css class .form-block is cloned. As you add another block with the css class .form-block you 've got two blocks with the same class name. On the next click you clone two items and so on.

Why not using the HTML5 template tag. Using this native type of templating you can archive several advantages. Your form will be faster, because you don 't need to load the jQuery library. With a few lines of native JavaScript you can archive, what you want. Have a look at the following example.

<form id="my-form" action="" method="post">

</form>
<button id="add-button">Add</button>
<template id="my-template">
    <div>
        <label>
            <span>Name</span>
            <input type="text" name="name[]" placeholder="your name">
        </label>
    </div>
</template>

This is an html example so far. You can add your own input elements and styles here. This piece of code is just for example purposes.

Now it 's time for some native JavaScript.

<script>
    document.getElementById('add-button').addEventListener('click', function(event) {
        var form = document.getElementById('my-form'),
            template = document.getElementById('my-template'),
            clone = document.importNode(template.content, true);

        form.appendChild(clone);
    }, false);

    // to add the first input element automatically
    var event = new Event('click');
    document.getElementById('add-button').dispatchEvent(event);
</script>

This works on every modern browser. For more detals about the html5 template tag and its functionality have a look at the MDN Web Docs. Also have a look at caniuse.com to see the browser support. As you can see, Microsofts Internet Explorer 11 does not support the template tag and its functionality. For that there are some astounding polyfills like the Web Components small template polyfill you could use, when IE11 support is in need.

查看更多
0人赞 添加讨论(0) 举报
劫难
3楼-- · 2019-07-18 18:30

You want to duplicate the .form-block and append it to the <form>...
So identify the elements correctly first... The form and the element to be cloned.

Then, .clone() from a stored "template" on click.

Notice that you have to clone for the "template"... And again on click!

var template = $(".form-block").clone();
var form = $(".form-main");

$('.add-more-btn').on('click',function() {
   var newFormBlock = template.clone(); // Clone again here, to be able to append more than once.
   form.append(newFormBlock);
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <title>Clone forms</title>
</head>
<body>
<div class="container">
  <div class="row">
  <div class="col-xs-12">
    <form class="form-main">
      <div class="form-block">
        <div class="form-group">
          Name
        <input type="text" name="name[]" class="form-control">
        </div>
        <div class="form-group">
          Email
        <input type="text" name="email[]" class="form-control">
        </div>
        <hr>
      </div>
    </form>
    <a class="btn btn-primary add-more-btn">Add one</a>
  </div>
</div>
</div>

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
4楼-- · 2019-07-18 18:31

Do not clone on button click. It is cloning what is in the form at the time of click which is increasing with every click. Instead, clone the form on load and store it in a variable. Then use it as many times.

var clone = $('.form-block').clone();
$('.add-more-btn').click(function() {
  $('.form-main').append(clone);
});

And note that .clone() does not take the parameter you were passing.

查看更多
0人赞 添加讨论(0) 举报
Melony?
5楼-- · 2019-07-18 18:33

Another solution with html which copy the first set of element.

var clone = $('.form-main').html();
$('.add-more-btn').click(function() {
  $('.form-main').append(clone);
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <title>Clone forms</title>
</head>
<body>
<div class="container">
  <div class="row">
  <div class="col-xs-12">
    <form class="form-main">
      <div class="form-block">
        <div class="form-group">
          Name
        <input type="text" name="name[]" class="form-control">
        </div>
        <div class="form-group">
          Email
        <input type="text" name="email[]" class="form-control">
        </div>
        <hr>
      </div>
    </form>
    <a class="btn btn-primary add-more-btn">Add one</a>
  </div>
</div>
</div>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)