Question

我有一个HTML表单，其中包含带有添加更多按钮的文本字段。当我们单击按钮时，文本字段将添加到表单。以下是表单的代码：

<div class="input-group g-mb-25">
  <div class="input-group-prepend">
    <label class="input-group-text g-bg-white" for="fields[]">1.</label>
  </div>
  <input type="text" class="form-control form-control-md" placeholder="Enter your Video Title. This will also be the starting point of your video..." aria-describedby="basic-addon1">
</div>

<div class="row">
  <div class="col-lg-4">
    <!-- Checkbox -->
    <label class="custom-control custom-checkbox mb-0">
        <input type="checkbox" class="custom-control-input" id="numCheck">
        <span class="custom-control-label">Show numbers</span>
    </label>
    <!-- End Checkbox -->
  </div>
</div>
<div class="entry input-group ">
  <div class="input-group-prepend">
    <label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
  </div>
  <input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1" />
  <div class="input-group-append">
    <button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
        <span class="fa fa-plus align-middle mr-1"></span>
    </button>
  </div>
</div>

添加字段的js如下：

// Add more fields
$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $('.controls form:first'),
      currentEntry = $(this).parents('.entry:first'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('u-btn-cyan').addClass('u-btn-lightred')
      .html('<span class="fa fa-trash"></span>');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});

请注意，我已在文本字段前添加标签：

<div class="input-group-prepend">
   <label class="input-group-text g-bg-white" for="fields[]"></label>
</div>

我无法确定的是，当我添加更多字段时如何在标签上添加数字，其中1是第一个“标题”字段的默认数字

添加了带有默认字段的表单HTML：

<div class="input-group g-mb-25">
  <div class="input-group-prepend">
    <label class="input-group-text g-bg-white" for="fields[]"></label>
  </div>
  <input type="text" class="form-control form-control-md" placeholder="Enter your Video Title. This will also be the starting point of your video..." aria-describedby="basic-addon1">
</div>

<div class="entry input-group ">
  <div class="input-group-prepend">
    <label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
  </div>
  <input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1" />
  <div class="input-group-append">
    <button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
        <span class="fa fa-plus align-middle mr-1"></span>
    </button>
  </div>
</div>

新字段添加为：

<div class="entry input-group ">
  <div class="input-group-prepend">
    <label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
  </div>
  <input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1">
  <div class="input-group-append">
    <button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
       <span class="fa fa-plus align-middle mr-1"></span>
   </button>
  </div>
</div>

动态将序列号添加到标签

0 个答案: