Question

我正在尝试使用Bootstrap为我正在创建的表单创建动态文本框。我有以下代码：

＆＃13;

$(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('btn-success').addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus"></span>');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group" id="fields">
  <label class="control-label" for="field1">Nice Multiple Form Fields</label>
  <div class="controls">
    <form role="form" autocomplete="off">
      <div class="entry input-group col-xs-3">
        <input class="form-control" name="fields[]" type="text" placeholder="Type something" />
        <span class="input-group-btn">
                                <button class="btn btn-success btn-add" type="button">
                                    <span class="glyphicon glyphicon-plus"></span>
        </button>

        </span>

      </div>
    </form>
    <br>
    <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add </small>
  </div>
</div>

＆＃13;

问题是当我在它周围添加一个表单元素时，由于某种原因它会停止工作，如下所示：

＆＃13;

$(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('btn-success').addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus"></span>');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="control-group" id="fields">
    <label class="control-label" for="field1">Nice Multiple Form Fields</label>
    <div class="controls">
      <form role="form" autocomplete="off">
        <div class="entry input-group col-xs-3">
          <input class="form-control" name="fields[]" type="text" placeholder="Type something" />
          <span class="input-group-btn">
                                <button class="btn btn-success btn-add" type="button">
                                    <span class="glyphicon glyphicon-plus"></span>
          </button>

          </span>

        </div>
      </form>
      <br>
      <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add </small>
    </div>
  </div>
</form>

＆＃13;

任何想法都会受到赞赏。

Answer 1

html中无法使用嵌套表单... nested form is not possible ...

总之，没有。您可以在页面中包含多个表单，但不应嵌套它们。 4.10.3表单元素

内容模型：

流内容，但没有表单元素后代。

<div class="control-group" id="fields">
    <label class="control-label" for="field1">Nice Multiple Form Fields</label>
    <div class="controls">
      <form role="form" autocomplete="off">
        <div class="entry input-group col-xs-3">
          <input class="form-control" name="fields[]" type="text" placeholder="Type something" />
          <span class="input-group-btn">
                                <button class="btn btn-success btn-add" type="button">
                                    <span class="glyphicon glyphicon-plus"></span>
          </button>

          </span>

        </div>
      </form>
      <br>
      <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add </small>
    </div>
  </div>


$(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('btn-success').addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus"></span>');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

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

Answer 2

您不能拥有嵌套表单

http://www.w3.org/TR/html4/interact/forms.html#h-17.3

FORM具有强制性开始标记，强制结束标记，并且可以包含％block或SCRIPT中的任何内容，但其他FORM除外。

XML DTD不像SGML DTD那样具有表现力，因此在XHTML中，此规则仅在规范的人类可读文本中指定：

表单不得包含其他表单元素。

- http://www.w3.org/TR/xhtml1/#prohibitions

添加表单元素会停止动态文本框的工作

2 个答案: