如何在Bootstrap中使用JavaScript动态添加文件？

Question

当我尝试使用此代码洞察力来检查表单类<form class="form-horizontal" action="create.php" method="post"> ，它将无法正常工作，但是当您将其从表单类中提出时，它将可以正常工作知道必须更改Java脚本，但是我是JS新手，所以请帮助我进行更改

这是我的形式：

<body>
  <form class="form-horizontal"  action="create.php"  method="post">
    <div class="form-group">
      <label for="des" class="col-sm-2 control-label">To Address</label>
      <div class="col-sm-8">
        <div class="controls"> 
          <form role="form" autocomplete="off">
            <div class="entry input-group ">
              <input class="form-control"name="fields[]"type="text"     placeholder="To....." />
              <span class="input-group-btn">
              <button class="btn btn-success btn-add"type="button">
              <span class="glyphicon glyphicon-plus"></span> </button> </span>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="form-group">
      <input name="submit" class="btn btn-success" type="submit" value="Save"   id="search"/>
    </div>
  </form>
</body>

myscript：

<script>
$(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;
    });
});

</script>

Answer 1

您在HTML标记中犯了一个错误，在另一个表单中添加了一个表单，而我查看了您的引用，您会发现您确实犯了一个错误。

<div class="container">
<div class="row">
    <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 another form field :)</small>
        </div>
    </div>
</div>

因此，如果您想添加POST方法，则可以将其添加到此处的form标记中，而不创建一个新方法。

希望这可以帮助。

Answer 2

在这里，我在添加表单洞察表单时犯了一个错误，即添加多个字段的简单方法：

<label for="des" class=" control-label">Description</label>
         <div class="multi-field-wrapper ">
           <div class="multi-fields">
             <div class="multi-field">
             <div class="col-sm-8">
               <input id="des" type="text" class="form-control" name="descrip[]"></div>
               <span class="remove-field">
                 <button class="btn btn-success btn-add" type="button">
                  <span class="glyphicon glyphicon-plus"></span></button></span>
             </div>
             </div>
         <button type="button" class="add-field">Add field</button>
        </div>

脚本功能：

 $('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});

如何在Bootstrap中使用JavaScript动态添加文件？

问题描述

2 个解决方案

解决方案1
1 2015-06-10 08:38:23

解决方案2
0 已采纳 2015-07-02 09:53:52

如何在Bootstrap中使用JavaScript动态添加文件？

问题描述

2 个解决方案

解决方案1 1 2015-06-10 08:38:23

解决方案2 0 已采纳 2015-07-02 09:53:52

解决方案1
1 2015-06-10 08:38:23

解决方案2
0 已采纳 2015-07-02 09:53:52