Question

我想通过点击添加更多按钮动态添加我的表单输入字段。

以下是表单的HTML：

<form enctype="multipart/form-data" action="" method="post">
  <div id="filediv">
    <input name="file[]" type="file" id="file" />
  </div>
  <div id="filediv2">
    <textarea rows="4" cols="10" id="des"></textarea>
  </div>
  <div id="filediv3">
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
  </div>
  <input type="button" id="add_more" class="upload" value="Add More Files" />
  <input type="submit" value="Upload File" name="submit" id="upload" class="upload" />
</form>

我尝试了以下操作，但是当单击添加更多按钮时，它不会附加所有字段。我想添加所有3个字段并添加更多操作。

 $('#add_more').click(function () {
   $(this).before($("<div/>", {
     id: 'filediv',
     id: 'filediv2',
     id: 'filediv3'
   }).fadeIn('slow').append($("<input/>", {
     name: 'file[]',
     type: 'file',
     id: 'file'
   }), $("<br/><br/>")),

   $("<input/>", {
     name: 'des',
     type: 'textarea',
     id: 'des'
   }), $("<br/><br/>"))
);
});

Answer 1

如果将要动态插入的元素包装在容器元素中，可以使用jQuery clone()方法创建它的副本并在添加更多按钮之前插入它，如下所示：

$('#add_more').click(function () {
    $(this).before($(".template").clone());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" action="" method="post">
    <div class="template">
        <div class="filediv">
            <input name="file[]" type="file" id="file" />
        </div>
        <div class="filediv2">
            <textarea rows="4" cols="10" id="des"></textarea>
        </div>
        <div class="filediv3">
            <select>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
            </select>
        </div>
        <input type="submit" value="Upload File" name="submit" class="upload" />
    </div>
</form>
<input type="button" id="add_more" value="Add More Files" />

附注：最好不要在动态模板中使用id，如果这样做，你将不得不经历必须删除它们的痛苦......

动态添加多个输入字段

1 个答案: