HTML表单jquery克隆问题

ncgqoxb0  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(100)

我有一个HTML页面的形式,有3个输入,我想有一个添加表单按钮,当我点击,3输入克隆,第一个输入组和提交按钮之间。
实际上,当我点击,所有的形式似乎克隆,所以我有2次添加表单按钮和提交按钮。

var clone = $('#form-container').html();

$('#add-form').click(function() {
  $('#form-container').append(clone);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="form-container" method="GET">
  <table>
    <div class="table-form">
      <label for="Field">Field </label>
      <select name="field" class="form-control">
        <option value="opt">label</option>
      </select>
      <label for="lookup">Lookup </label>
      <select name="lookup" class="form-control">
        <option value="iexact">iexact</option>
        <option value="icontains">icontains</option>
        <option value="in">in</option>
      </select>
      <label for="value">Value </label>
      <input id="value" type="text" name="value" value="current_value">
    </div>
  </table>
  <button id="add-form" type="button" class="btn btn-primary">Add form</button>
  <button type="submit" class="btn btn-primary">Search</button>
  <button type="submit" name="btn-reset" class="btn btn-secondary" value="btn-reset">Reset</button>
</form>
vbkedwbf

vbkedwbf1#

您只需要克隆要克隆的部分,并将其追加到#form-container'中。

/// Clone the table form
var clone = $('.table-form').html();

$('#add-form').click(function(e) {
  // append it to the table-form
  $('.table-form').append(clone);
  e.preventDefault()
});
kkbh8khc

kkbh8khc2#

注意:我删除了无效的表标记,并将reset按钮上的type=“submit”更改为type=“reset
如果您只想复制表格的内容,那么我们可以这样做

const html = $('div.table-form').first().html();
$('#add-form').on('click', function() {
  $('div.table-form').append(`<br/>${html}`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="form-container" method="GET">
  <div class="table-form">
    <label for="Field">Field </label>
    <select name="field" class="form-control">
      <option value="">Please select</option>
      <option value="opt1">Opt 1</option>
    </select>
    <label for="lookup">Lookup </label>
    <select name="lookup" class="form-control">
      <option value="">Please select</option>
      <option value="iexact">iexact</option>
      <option value="icontains">icontains</option>
      <option value="in">in</option>
    </select>
    <label for="value">Value </label>
    <input id="value" type="text" name="value" value="">
  </div>
  <button id="add-form" type="button" class="btn btn-primary">Add form</button>
  <button type="submit" class="btn btn-primary">Search</button>
  <button type="reset" name="btn-reset" class="btn btn-secondary" value="btn-reset">Reset</button>
</form>

但是,如果你想克隆这个div,那么这段代码每次都会创建一个新的克隆,因为如果你只在click之外存储一个克隆,那么每次移动(追加)的都是同一个元素。在表单中的div中有一个set比将元素添加到一个div中更有意义

$('#add-form').on('click', function() {
  var $clone = $('div.table-form').first().clone();
  $clone.find("select").each(function() { this.selectedIndex = 0; });
  $clone.find("input").each(function() { this.value=""; });
  $('div.table-form').last().after($clone);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="form-container" method="GET">
  <div class="table-form">
    <label for="Field">Field </label>
    <select name="field" class="form-control">
      <option value="">Please select</option>
      <option value="opt1">Opt 1</option>
    </select>
    <label for="lookup">Lookup </label>
    <select name="lookup" class="form-control">
      <option value="">Please select</option>
      <option value="iexact">iexact</option>
      <option value="icontains">icontains</option>
      <option value="in">in</option>
    </select>
    <label for="value">Value </label>
    <input id="value" type="text" name="value" value="">
  </div>
  <button id="add-form" type="button" class="btn btn-primary">Add form</button>
  <button type="submit" class="btn btn-primary">Search</button>
  <button type="reset" name="btn-reset" class="btn btn-secondary" value="btn-reset">Reset</button>
</form>

相关问题