Question

我正在尝试创建上传表单。它到目前为止运行良好，我正在尝试解决一些我不喜欢的错误。

我似乎遇到麻烦的是

$(element).find(">:first-child").attr("value", "");

当克隆表单时，它克隆div并替换值，没有任何东西留下空白表单，这很有效，如果我要删除该行我会获得前一个表单的值，所以这对于空白会很好形式展示。

我遇到的问题是当您删除表单时所有表单值都删除，我想要的是删除表单时，保留其他表单的值。

这是一个小提琴http://jsfiddle.net/d77pd/1/或见下面的代码

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>

的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);
    })
});

克隆表单几次，如果你从内容中删除任何形式的第一个表单，你会注意到第一个表单的内容删除，我希望这个单独留下。

Answer 1

第一种方法： 从add function调用$(element).find(">:first-child").attr("value", "");后调用updateClonedInput(cloneIndex, new_Input);。

<强> Working Demo First approach:

第二种方法：

我修改了一些代码。在函数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);
    })
});

<强> Working Demo Second Approach

Answer 2

从第一个元素创建一次空白克隆的替代解决方案，然后每次需要新行时使用它。它还使用CSS隐藏/显示删除按钮，因为您只需要在所有行上删除按钮，除非它是唯一的子项。

免责声明：我已删除id操作，因为我不确定您是否真的需要它。如有必要，我可以更新。

Demo

<强> HTML

<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>

<强> CSS

.clonedInput .remove {
    display:inline-block;
}

.clonedInput:only-child .remove {
    display:none;
}

<强>的JavaScript

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()借鉴Resetting a multi-stage form with jQuery

克隆表单输入和清除值

2 个答案: