2013-08-05 4 views
0

추가 버튼을 클릭하면 해당 블록을 복사 할 수있는 템플릿 html 블록을 만들었습니다. 이것은 append()을 통해 이루어집니다.append() 후 입력 값 변경

입력 필드가 추가 된 후 name='category[]' 입력 필드의 값을 변경하는 방법은 무엇입니까?

예를 들어

이 그것을 구현하는 깔끔한 방법 인 경우

$('#add').click(function() { 
    $('#LinesContainer').append($('#templatePlan').html()); 
    var getCategory = $("#selectCategory").val(); 
    // How to put getCategory value into category[] field? 
}); 

카테고리 선택 나는 확실하지 않다

<div> 
    <select id="selectCategory"> 
     <option value="New">New</option> 
     <option value="Old">Old</option> 
    </select> 
    <input value="+" id="add" type="button"/> 
</div> 

템플릿 블록

<div id="templatePlan" style="display:none;"> 
<div style='padding: 5px; border: 1px solid white; background-color: #FFA86F;'> 
    <select name="selectType[]"> 
     <option>Consumer</option> 
     <option>Business</option> 
    </select> 
    <input name='category[]' type='hidden' value='' /> 
</div> 
</div> 


<div id="LinesContainer"> </div> 

을 + 버튼을 클릭 , 대체 방법이 더 좋은가요?

답변

1

그냥 선택하십시오. innerHTML 대신 템플릿에 .clone()을 사용하는 것이 좋습니다. 그러면 선택이 더 쉬워집니다. 그렇지 않으면 여러 카테고리 입력이있을 수 있으며 마지막 입력을 사용해야합니다.

$('#add').click(function() { 
    $('#templatePlan').children('div').clone().appendTo('#LinesContainer') 
    .find('input name="category[]"').val($("#selectCategory").val()); 
}); 
+0

감사합니다. 전반적인 구현 설계에 대해 어떻게 생각하십니까? 또는 각 추가 된 블록에 인덱스 번호가 있어야합니까? 그래서 Add 버튼을 클릭 할 때마다 최대 인덱스가 1 씩 증가합니다. 예 :'category_5' 필드 이름 –

+0

Nah, 배열이 좋습니다. jQuery는 그것들을 우아하게 처리하지는 않지만 불필요한 ID보다 낫다. 하나의 향상 만 : 숨겨진 템플릿 div를 자식 div와 병합 한 다음'$ ('templatePlan') .clone(). show() ...' – Bergi

+0

흠, 알아 내려고하고 있습니다. 제출 버튼을 클릭하고 오류가있는 경우 양식 페이지로 돌아가지만 첨부 된 블록을 필드 데이터로 다시 채워야합니다. 어떻게 할 수 있습니까? PHP를 사용하고 있습니다. –

0
//after 
    var getCategory = $("#selectCategory").val(); 

//To set the actual input 
    $('input[type="hidden"]').val(getCategory); 
//or to update the attribute rather 
$('input[type="hidden"]').attr('name', 'category[' + getCategory + ']');