Add/Removed tabbed data from a form using JQuery

Question

I'm working on a client portal at the moment and with the help of the people on this forum and many hours of blood sweat and tears I have got to this point pictured below.

I now need to complete the final step of this form but I'm not quite sure how to go about it. At the bottom there's a tabbed interface and a above it there is are check boxes. What I want is a system where the user can check and uncheck the boxes and the tabs appear and disappear so they can choose that days of the week they're open. This code also needs to add/remove the details in the tab from the scope of the form and this is the part I'm struggling to work out. The rest of the form is built using JQuery so I'm keen to keep the code consistent.

What I don't want a person to submit the form at the bottom and it accidentally submits the days information they haven't selected with the checkboxes.

Hope someone can help

Dan

This is the code I'm using to tab, I tried the JQuery UI one but didn't like 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 was using a piece of code similar to the one below to hide and show the tabs when the checkbox is checked but it was crude and didn't work, I was appendinging it to a div that was hidden and outside the scope of the form then toggling this with a div inside the 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');
      }
 })

Answer 1

I would recommend disabling the form fields that you don't want to submit, and enabling them when the appropriate checkbox is selected:

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

Disabled form elements are not passed to the server when the form is submitted. This also has the advantage of keeping the data in the form if the user re-enables the tab.

Answer 2

I think validating the data being transmitted by the form is what you are looking for to prevent bad data from being sent. Use jQuery to change the content of the tab space to add/remove form information as needed.