bootstrap 上的动态表单域

Question

我已经寻找了很多解决方案，但我无法为我的 bootstrap 表单找到确切的解决方案。

我有下面的代码。我想在输入字段旁边放一个 (+) 并添加带有 (-) 的新字段以删除。

所有使用 bootstrap 完成的示例都没有使用表单组。但我的情况是表格组。我该怎么做？

我正在使用 bootstrap 3.3.6 版本。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-horizontal">
  <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Pickup Time</label>
      <div class="col-md-4">
        <div class="input-group">
          <input type="text" class="form-control"/>
        </div>
        <span class="help-block">Enter the pickup time </span>
      </div>
    </div>
  </div>
  <div class="form-actions right">
    <div class="row">
      <div class="col-md-offset-3 col-md-9">
        <button type="button" class="btn btn-default prev-step">Previous</button>
        <button type="button" class="btn default">Cancel</button>
        <button type="button" class="btn btn-primary next-step blue">
          <i class="fa fa-check"></i>Save and Continue
        </button>
        <button type="button" class="btn btn-primary next-step">Next</button>
      </div>
    </div>
  </div>
</div>

Answer 1

var template = '<div class="input-group"><input type="text" class="form-control"/></div>',
    minusButton = '<span class="btn input-group-addon delete-field">(-)</span>';

$('.add-field').click(function() {
  var temp = $(template).insertBefore('.help-block');
  temp.append(minusButton);
});

$('.fields').on('click', '.delete-field', function(){
  $(this).parent().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-horizontal">
  <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Pickup Time</label>
      <div class="col-md-4 fields">
        <div class="input-group">
          <input type="text" class="form-control"/>
          <span class="btn input-group-addon add-field">(+)</span>
        </div>
        <span class="help-block">Enter the pickup time </span>
      </div>
    </div>
  </div>
  <div class="form-actions right">
    <div class="row">
      <div class="col-md-offset-3 col-md-9">
        <button type="button" class="btn btn-default prev-step">Previous</button>
        <button type="button" class="btn default">Cancel</button>
        <button type="button" class="btn btn-primary next-step blue">
          <i class="fa fa-check"></i>Save and Continue
        </button>
        <button type="button" class="btn btn-primary next-step">Next</button>
      </div>
    </div>
  </div>
</div>

bootstrap 上的动态表单域

Dynamic form field on bootstrap

jquery

dynamic-forms

twitter-bootstrap

dynamicform