Featured post
javascript - Add/Removed tabbed data from a form using JQuery -
i'm working on client portal @ moment , of people on forum , many hours of blood sweat , tears have got point pictured below.
i need complete final step of form i'm not quite sure how go it. @ bottom there's tabbed interface , above there check boxes. want system user can check , uncheck boxes , tabs appear , disappear can choose days of week they're open. code needs add/remove details in tab scope of form , part i'm struggling work out. rest of form built using jquery i'm keen keep code consistent.
what don't want person submit form @ bottom , accidentally submits days information haven't selected checkboxes.
hope can help
dan
this code i'm using tab, tried jquery ui 1 didn't it
$(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'); });
i using piece of code similar 1 below hide , show tabs when checkbox checked crude , didn't work, appendinging div hidden , outside scope of form toggling div inside form:
$('#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'); } })
i recommend disabling form fields don't want submit, , enabling them when appropriate checkbox selected:
$('#check-monday').toggle(function () { $('#tab-monday :input').attr('disabled', 'disabled'); // hide tab }, function () { $('#tab-monday :input').removeattr('disabled'); // show tab });
disabled form elements not passed server when form submitted. has advantage of keeping data in form if user re-enables tab.
- Get link
- X
- Other Apps
Comments
Post a Comment