Hinzufügen/Entfernen von Tabbed-Daten aus einem Formular mit JQuery

Question

Ich arbeite gerade an einem Kundenportal und mit Hilfe der Leute in diesem Forum und vielen Stunden Blutschweiß und Tränen bin ich an dieser Stelle unten abgebildet .

Ich brauche jetzt den letzten Schritt dieses Formular auszufüllen, aber ich bin mir nicht ganz sicher, wie es geht. An der Unterseite befindet sich eine Tabbed-Schnittstelle und darüber befinden sich Kontrollkästchen. Was ich will, ist ein System, in dem der Benutzer die Kontrollkästchen aktivieren und deaktivieren kann und die Registerkarten erscheinen und verschwinden, so dass sie die Wochentage auswählen können, an denen sie geöffnet sind. Dieser Code muss auch die Details in der Registerkarte aus dem Bereich des Formulars hinzufügen/entfernen, und das ist der Teil, den ich nicht ausarbeiten kann. Der Rest des Formulars wird mit JQuery erstellt. Daher möchte ich den Code konsistent halten.

Was ich nicht möchte, dass eine Person das Formular am unteren Rand abgibt, und es versehentlich die Tage Informationen, die sie nicht ausgewählt haben, mit den Kontrollkästchen übermittelt.

Hoffnung jemand

Dan

Dies ist der Code auf die Registerkarte Ich verwende helfen kann, habe ich versucht, die JQuery UI ein, aber habe es nicht

$(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'); 
}); 

mag ich wurde mit ein Code ähnlich dem unten, um die Tabs zu verbergen und anzuzeigen, wenn das Kontrollkästchen aktiviert ist, aber es war grob und hat nicht funktioniert, ich habe es an eine Div angefügt, die versteckt war und außerhalb des Bereichs des Formulars, dann umschalten mit einem div im Formular:

$('#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

Ich würde empfehlen, die Formularfelder zu deaktivieren, die Sie nicht einreichen wollen, und es ihnen ermöglichen, wenn die entsprechende Option ausgewählt ist:

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

Behinderte Formelemente sind nicht auf den Server übergeben, wenn das Formular ist eingereicht. Dies hat auch den Vorteil, die Daten im Formular zu halten, wenn der Benutzer die Registerkarte erneut aktiviert.

Answer 2

Ich denke, die Daten, die durch das Formular übertragen werden, zu validieren ist, was Sie suchen, um zu verhindern, dass fehlerhafte Daten gesendet werden. Verwenden Sie jQuery, um den Inhalt des Registerkartenbereichs zu ändern, um Formularinformationen nach Bedarf hinzuzufügen/zu entfernen.