克隆表單輸入和清除值

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

克隆形式幾次，如果你刪除任何形式的分開形式第一個與內容，你會注意到第一個表格的內容nt刪除，我想這個留下。

Answer 1

第一種方法： 從增加功能調用updateClonedInput(cloneIndex, new_Input);後調用$(element).find(">:first-child").attr("value", "");。

Working Demo First approach:

方法二：

我已經修改一些代碼。傳遞函數updateClonedInput多了一個布爾參數添加時。其中將被設置爲true，並設置爲false時，DOM是removed.This將阻止值上刪除功能得到更換：

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