克隆表单，添加新的每个

问题描述 投票：2回答：4

当我单击按钮时，我需要逐个添加表单，但在第二次单击时，该功能会附加多个表单。

我的剧本中我做错了什么？

谢谢

$('.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>
javascript jquery forms clone
4个回答
1
投票

你想要复制.form-block并将其附加到<form> ...... 因此，首先要正确识别元​​素......要克隆的形式和元素。

然后，.clone()从存储的“模板”点击。

请注意，您必须克隆“模板”...再次点击！

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>
1
投票

因为在css类上使用clone方法，所以克隆了css类.form-block的每个div容器。当您使用css类.form-block添加另一个块时，您有两个具有相同类名的块。在下一次单击时，您将克隆两个项目，依此类推。

为什么不使用HTML5模板标签。使用这种本机类型的模板，您可以归档几个优点。您的表单会更快，因为您不需要加载jQuery库。使用几行本机JavaScript，您可以存档，您想要什么。看看下面的例子。

<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>

到目前为止，这是一个html示例。您可以在此处添加自己的输入元素和样式。这段代码仅用于示例目的。

现在是一些原生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>

这适用于每个现代浏览器。有关html5模板标签及其功能的更多信息，请查看MDN Web Docs。另请查看caniuse.com以查看浏览器支持。如您所见，Microsoft Internet Explorer 11不支持模板标记及其功能。为此，当需要IE11支持时，有一些令人震惊的polyfill，如你可以使用的Web Components small template polyfill。

1
投票

使用html复制第一组元素的另一种解决方案。

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>
1
投票

单击按钮时不要克隆。它是克隆点击时形式的内容，每次点击都会增加。相反，在加载时克隆表单并将其存储在变量中。然后多次使用它。

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

请注意.clone（）不会接受您传递的参数。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.