JQuery를 사용하여 양식에서 탭 데이터 추가/제거

Question

저는 현재이 포털에서 사람들의 도움을 받아이 포털에서 작업하고 있습니다. .

는 지금이 양식의 마지막 단계를 완료해야하지만 난 그것에 대해 이동하는 방법을 아주 확실하지 않다. 아래쪽에는 탭 인터페이스가 있고 그 위에는 확인란이 있습니다. 내가 원하는 것은 사용자가 상자를 체크하고 체크를 풀 수있는 탭이며 탭은 나타나고 사라져서 그들이 열리는 요일을 선택할 수있다. 이 코드는 또한 폼의 범위에서 탭의 세부 사항을 추가/제거해야하는데, 이것이 내가 해결하는데 어려움을 겪고있는 부분입니다. 나머지 양식은 JQuery를 사용하여 작성되었으므로 일관된 코드를 유지하려고합니다.

개인이 하단에 양식을 제출하고 싶지 않고 실수로 선택하지 않은 요일 정보를 확인란과 함께 제출하기를 바랍니다. 사람이 내가 탭으로 사용하고 코드가

댄 도움을 줄 수

희망, 나는 JQuery와 UI를 시도했지만 내가 사용하고 그것을

$(document).ready(function(){ 
    $('.days:not(:first)').hide(); 
    $('#info-nav li').click(function(e) { 
    $('.days').hide(); 
    $('#info-nav .current').removeClass("current"); 
    $(this).addClass('current'); 

    var clicked = $(this).find('a:first').attr('href'); 
    $('#info ' + clicked).fadeIn('fast'); 
    e.preventDefault(); 
}).eq(0).addClass('current'); 
}); 

를 좋아하지 않았다 체크 박스가 체크되었을 때 탭을 숨기고 표시하는 코드와 비슷한 코드 조각이지만 그것이 작동하지 않는다면 숨겨진 div에 appending하고 폼의 범위 밖에서 이것을 토글 링합니다. 양식 안에 div가있는 경우 :

$('#info-nav li').hide(); 
$('#holdingDiv').hide(); 

if($(':checkbox[name="Monday"]').is(':checked')) 
{ 
    $('#info-nav li a[href="#Monday"]').parents("li").show(); 
    $('#Monday').appendTo('#info'); 
} 

if($(':checkbox[name="Tuesday"]').is(':checked')) 
{ 
    $('#info-nav li a[href="#Tuesday"]').parents("li").show(); 
    $('#Tuesday').appendTo('#info'); 
} 

if($(':checkbox[name="Wednesday"]').is(':checked')) 
{ 
    $('#info-nav li a[href="#Wednesday"]').parents("li").show(); 
$('#Wednesday').appendTo('#info'); 
} 

if($(':checkbox[name="Thursday"]').is(':checked')) 
{ 
    $('#info-nav li a[href="#Thursday"]').parents("li").show(); 
$('#Thursday').appendTo('#info'); 
} 

if($(':checkbox[name="Friday"]').is(':checked')) 
{ 
    $('#info-nav li a[href="#Friday"]').parents("li").show(); 
$('#Friday').appendTo('#info'); 
} 

if($(':checkbox[name="Saturday"]').is(':checked')) 
{ 
    $('#info-nav li a[href="#Saturday"]').parents("li").show(); 

} 

if($(':checkbox[name="Sunday"]').is(':checked')) 
{ 
    $('#info-nav li a[href="#Sunday"]').parents("li").show(); 
     $('#Sunday').appendTo('#info');}             $(':checkbox').click(function() 
{ 
    if($(':checkbox[name="'+ $(this).attr('name') +'"]').is(':checked')) 
    { 
     $('#info-nav li a[href="' + $(this).val() + '"]').parents("li").show(); 
     $($(this).val()).appendTo('#info'); 
    $('#info-nav li a[href="' + $(this).val() + '"]').parents("li").hide(); 
    $($(this).val()).appendTo('#holdingDiv'); 
     } 
}) 

Answer 1

난 당신이 제출하지 않을 양식 필드를 해제하고 해당 확인란을 선택하면 그들을있게 추천 할 것입니다 : 양식 인 경우

$('#check-monday').toggle(function() { 
    $('#tab-monday :input').attr('disabled', 'disabled'); 
    // hide the tab 
}, function() { 
    $('#tab-monday :input').removeAttr('disabled'); 
    // show the tab 
}); 

장애인 폼 요소가 서버에 전달되지 않습니다 제출. 또한 사용자가 탭을 다시 활성화하면 데이터를 폼에 유지할 수 있다는 이점이 있습니다.

Answer 2

양식에서 전송되는 데이터의 유효성을 검사하는 것은 불량 데이터가 전송되는 것을 방지하기 위해 찾고있는 것이라고 생각합니다. jQuery를 사용하여 필요에 따라 양식 정보를 추가/제거하기 위해 탭 공간의 내용을 변경하십시오.