Javascript 克隆表单输入并清除值
我正在尝试创建一个上传表单。到目前为止,它工作得很好,我正试图找出一些我不喜欢的错误 我似乎遇到麻烦的线路是Javascript 克隆表单输入并清除值,javascript,jquery,Javascript,Jquery,我正在尝试创建一个上传表单。到目前为止,它工作得很好,我正试图找出一些我不喜欢的错误 我似乎遇到麻烦的线路是 $(element).find(">:first-child").attr("value", ""); 当克隆表单时,它克隆div并用任何内容替换值,留下一个空白表单,这很好,如果我删除该行,我将获得上一个表单的值,因此显示一个空白表单会很好 我遇到的问题是,当你删除一个表单时,所有表单的值都会被删除,我想要的是,当你删除一个表单时,将该值留给其他表单 这里有一把小提琴,或者看下
$(element).find(">:first-child").attr("value", "");
当克隆表单时,它克隆div并用任何内容替换值,留下一个空白表单,这很好,如果我删除该行,我将获得上一个表单的值,因此显示一个空白表单会很好
我遇到的问题是,当你删除一个表单时,所有表单的值都会被删除,我想要的是,当你删除一个表单时,将该值留给其他表单
这里有一把小提琴,或者看下面的代码
HTML
<button class="clone">Add an Image</button>
<div id="upload_image_sets">
<div id="clonedInput1" class="clonedInput">
<input type="text" id="upload_image_link_1" class="image" size="36" name="hero_options[upload_image_link_1]" value="' . $hero_options['upload_image_link_1'] . '" />
<input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" />
<button class="remove">Remove</button>
</div>
</div>
<button class="clone">Add an Image</button>
<div id="upload_image_sets">
<div class="clonedInput">
<input type="text" class="image" size="36" name="hero_options[upload_image_link_1]" value="an initial value" />
<input class="button upload_images" type="button" value="Upload Image" />
<button class="remove">Remove</button>
</div>
</div>
克隆表单几次,如果您删除第一个表单之外的任何表单,您会注意到第一个表单的内容会被删除,我希望这一点不受影响。第一种方法: 调用
$(元素).find(“>:first child”).attr(“value”,”)调用updateClonedInput(cloneIndex,新输入)后的code>代码>来自添加函数
第二种方法:
我修改了一些代码。在函数updateClonedInput
中再传递一个bool参数。添加时将设置为true,删除dom时将设置为false。这将防止在删除函数上替换值:
function updateClonedInput(index, element,param) {
$(element).appendTo("#upload_image_sets").attr("id", "clonedInput" + index);
$(element).find(">:first-child").attr("id", "cs_product_menu_img_src_" + index);
$(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
if(param)
$(element).find(">:first-child").attr("value", "");
$(element).find(">:first-child").next().attr("id", "cs_product_menu_img_src_" + index + "_button");
displayRemove();
}
function displayRemove() {
if($('.clonedInput').length === 1) {
$('.remove').hide();
} else {
$('.remove').show();
}
}
displayRemove();
$(document).on("click", ".clone", function(e){
e.preventDefault();
var cloneIndex = $(".clonedInput").length + 1;
var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone();
updateClonedInput(cloneIndex, new_Input,true);
});
$(document).on("click", ".remove", function(e){
e.preventDefault();
$(this).parents(".clonedInput").remove();
$(".clonedInput").each( function (cloneIndex, clonedElement) {
updateClonedInput(cloneIndex + 1, clonedElement,false);
})
});
一种替代解决方案,它从第一个元素创建一个空克隆,然后在每次需要新行时使用该克隆。它还使用CSS隐藏/显示Remove按钮,因为您只需要在所有行上使用Remove按钮,除非它是唯一的子行
免责声明:我已删除id
操作,因为我不确定您是否真的需要它。如有必要,我可以更新
HTML
<button class="clone">Add an Image</button>
<div id="upload_image_sets">
<div id="clonedInput1" class="clonedInput">
<input type="text" id="upload_image_link_1" class="image" size="36" name="hero_options[upload_image_link_1]" value="' . $hero_options['upload_image_link_1'] . '" />
<input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" />
<button class="remove">Remove</button>
</div>
</div>
<button class="clone">Add an Image</button>
<div id="upload_image_sets">
<div class="clonedInput">
<input type="text" class="image" size="36" name="hero_options[upload_image_link_1]" value="an initial value" />
<input class="button upload_images" type="button" value="Upload Image" />
<button class="remove">Remove</button>
</div>
</div>
JavaScript
function updateClonedInput(index, element) {
$(element).appendTo("#upload_image_sets").attr("id", "clonedInput" + index);
$(element).find(">:first-child").attr("id", "cs_product_menu_img_src_" + index);
$(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
$(element).find(">:first-child").attr("value", "");
$(element).find(">:first-child").next().attr("id", "cs_product_menu_img_src_" + index + "_button");
displayRemove();
}
function displayRemove() {
if ($('.clonedInput').length === 1) {
$('.remove').hide();
} else {
$('.remove').show();
}
}
displayRemove();
$(document).on("click", ".clone", function (e) {
e.preventDefault();
var cloneIndex = $(".clonedInput").length + 1;
var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone();
updateClonedInput(cloneIndex, new_Input);
});
$(document).on("click", ".remove", function (e) {
e.preventDefault();
$(this).parents(".clonedInput").remove();
$(".clonedInput").each(function (cloneIndex, clonedElement) {
updateClonedInput(cloneIndex + 1, clonedElement);
})
});
function resetForm($form) {
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
}
var $blankClone = $('.clonedInput').clone();
resetForm($blankClone);
$(document).on('click', '.clone', function(e) {
e.preventDefault();
$blankClone.clone().appendTo('#upload_image_sets');
});
$('#upload_image_sets').on('click', '.remove', function(e) {
e.preventDefault();
$(this).closest('.clonedInput').remove();
});
resetForm()
借用自请解释您所做的更改及其原因。这两个演示都不适用于我。添加到克隆行的值将复制到下一个克隆。是否对每个克隆上的id
属性增加有特定要求?我之所以这样做,是因为克隆、附加和清除值可以用更少的代码来执行。即使删除按钮也不会附加到每个添加中。