복제 폼 입력하고 명확한 값

Question

내가 업로드 양식을 만들려고 해요. 그것은 지금까지 잘 작동하고 그리고 난 내가 싫어하는 버그의 몇 가지를 분류하는 것을 시도하고있다.

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

이다와 나는 것

선은 형태를 복제 할 때, 내가한다면이 잘 작동 사업부 클론 아무것도 빈 양식을 남기지 않고와 값을 대체하는 데 문제가있다 나는 이전 폼의 값을 얻을 것이라고 줄을 삭제, 그래서 빈 양식을 표시하는 것이 좋을 것이다. 당신은 모든 형태의 값이 삭제 양식을 삭제하면

난 데 문제는, 내가 원하는 무엇을, 양식을 삭제 다른 형태 혼자 값을 떠날 때입니다.

가 여기에 바이올린 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> 

자바 스크립트를 몇 번, 어떤 양식을 삭제하면 떨어져 형태

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:

두 번째 방법 :

나는 몇 가지 코드를 수정했습니다. 추가 할 때 true로 설정하고 DOM이 값을 방지 할 수 removed.This이 제거 기능을 대체하기 때 거짓으로 설정됩니다 .which 기능 updateClonedInput에서 한 번 더 부울 인수를 전달 :

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

자바 스크립트

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() 16,가 증가에 대한 특정 요구 사항이 있습니까 Resetting a multi-stage form with jQuery