如何使用jquery动态添加/删除文件类型输入字段
How to dynamically Add/Remove file type input field using jquery?
我不能动态删除输入字段,我可以添加字段,但我的删除选项不起作用。我使用jquery来动态添加/删除字段,并使用bootstrap 3来进行布局。
这是我的标记:
<div class="row margin-bottom">
<div class="col-md-12 col-sm-12">
<button type="submit" class="add-box btn btn-info"><span class="glyphicon glyphicon-plus"></span> Add More Fields</button>
</div>
</div>
<?php $attributes = array('class' => 'form-horizontal', 'role' => 'form'); echo form_open_multipart('config/upload_image', $attributes);?>
<div class="text-box form-group">
<div class="col-sm-4"><input type="file" class="" name="txtImage[]" id="imageinput"/></div>
</div>
<div class="form-group">
<div class="col-sm-2">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-upload"></span> Upload</button>
</div>
</div>
<?php echo form_close();?>
这是我的jquery代码:
$(document).ready(function(){
$('.add-box').click(function(){
var n = $('.text-box').length + 1;
if(n > 5)
{
alert('Only 5 Savy :D');
return false;
}
var box_html = $('<div class="text-box form-group"><div class="col-sm-4"><input type="file" class="" name="txtImage[]" id="imageinput'+ n +'"/></div><div class="col-sm-2"><button type="submit" class="remove-box btn btn-danger btn-sm"><i class="fa fa-minus-circle fa-lg"></i></button></div></div>');
$('.text-box:last').after(box_html);
box_html.slidedown('slow');
});
$('.form-horizontal').on('click', '.remove-box', function(){
$(this).parent().remove();
return false;
});
});
错误出现在删除按钮单击事件处理程序中。您需要删除最接近的表单组,而不是直接父组:
$('.form-horizontal').on('click', '.remove-box', function(){
$(this).closest(".form-group").remove();
return false;
});
请检查此bootply以获取工作示例:http://www.bootply.com/x8n3dQ6wDf
编辑
对于移除时的动画,您可以使用jQuery slideUp,如下所示:
$('.form-horizontal').on('click', '.remove-box', function(){
var formGroup = $(this).closest(".form-group");
formGroup.slideUp(200, function() {
formGroup.remove();
});
return false;
});
相关文章:
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- 限制文件类型,大小,单次上传不'无法在jquery文件上传中工作
- 选择特定文件类型时切换额外输入
- 将字符串文件类型/权限转换为数字
- 使用 if - JS 将文件类型附加到 url
- 如果数据的格式略有损坏,是否仍然可以确定其文件类型
- 如何在Joomla模块中通过JavaScript发送输入文件类型
- 如何在Django表单中设置可接受的文件类型'的FileInput小部件
- 根据文件类型取消绑定和重新绑定click事件处理程序
- 禁止的文件类型docx
- 如何将文件类型从Coldfusion代码转换为javascript代码
- 使用Foundation Abide验证文件类型
- Javascript正则表达式文件类型崩溃chrome
- 如何在模式窗口中从html表单文件类型打开图像
- "npm运行构建“;模块解析错误”;您可能需要一个适当的加载程序来处理此文件类型&”;
- jQuery更改时验证文件类型
- Webpack错误:“您可能需要一个适当的加载程序来处理此文件类型”
- 如何使用ReactTestUtils设置HTML5文件类型输入
- Webpack:您可能需要一个适当的加载程序来处理此文件类型
- 文件类型值作为图像源