Hello great forum of the greatest Couch !

I have some trouble with a portion of a form...

I made tabbed panel inside the form, 4 tabs each containing input check boxes...But, if a select anything form the first tab, then change to another tab and select there something, the checkboxes in the previous tab are "dechecked" automatically...
Is there a way to keep all selected checkboxes, and even select in various tabs...
I send here the code I used

thanks in advance for any help and suggestion

Tanja

javascript:

Code: Select all

<script type="text/javascript">
 var namee;
function change(namee){
document.getElementById("Display_content").innerHTML=document.getElementById(namee).innerHTML;
 //optional Javascript code below - To change color of clicked tab
var livetab, i;
switch(namee){
    case 'tab1':
        livetab='t1';
    break;
    case 'tab2':
        livetab='t2';
    break;
    case 'tab3':
        livetab='t3';
    break;
   case 'tab4':
        livetab='t4';
    break;
}
for(i=1;i<=4;i++){
    document.getElementById("t"+i).style.backgroundColor="#f7efee";
   document.getElementById("t"+i).style.color="rgb(97,0,0)";
   document.getElementById("t"+i).style.fontWeight="400";
   document.getElementById("t"+i).style.borderColor="white";
}
document.getElementById(livetab).style.backgroundColor="white";
document.getElementById(livetab).style.color="rgb(97,0,0)";
document.getElementById(livetab).style.fontWeight="600";
document.getElementById(livetab).style.borderColor="rgb(97,0,0)";
//optional code ends here
 }
 
</script>

HTML, only tabbed portion. I have all couch form tags, and form is functioning otherwise:

Code: Select all

<div id="tabbed_section">
  <div id="choose">
    <ul id="ul_tabs">
      <li class="lh" id="t1" onClick="change('tab1')">
  Kurs
      </li>
      <li class="lh" id="t2" onClick="change('tab2')">
    Workshops
      </li>
      <li class="lh" id="t3" onClick="change('tab3')">
    Intensivcoaching
      </li>
      <li class="lh" id="t4" onClick="change('tab4')">
    Mentoring
      </li>
    </ul>
  </div>
  <div id="Display_content" onload="change('h1')">
  </div>
  <!-- kurse-->
    <div id="tab1" class="content_tab">
      <div class="t_bgcolor t_label">
        <cms:input type='checkbox' name='kurs1' opt_values="Titel 1 Lorem ipsum = titel 1 "/>
        <p class="t_date_label"><cms:input type='checkbox' name='d_kurs1' opt_values=" Januar 2015= januar | Februar 2015 = februar 2015 | März 2015 = märz 2015" /></p>
      </div>
      <div class="t_nobgcolor t_label">
        <cms:input type='checkbox' name='kurs2' opt_values="Titel 2 Lorem ipsum = titel 2 "/>
        <p class="t_date_label"><cms:input type='checkbox' name='d_kurs2' opt_values=" Januar 2015= januar | Februar 2015 = februar 2015 | März 2015 = märz 2015" /></p>
      </div>
      <div class="t_bgcolor t_label">
        <cms:input type='checkbox' name='kurs3' opt_values="Titel 3 Lorem ipsum = titel 3 "/>
        <p class="t_date_label"><cms:input type='checkbox' name='d_kurs3' opt_values=" Januar 2015= januar | Februar 2015 = februar 2015 | März 2015 = märz 2015" /></p>
      </div>
    </div>
    <!-- workshops--> 
    <div id="tab2" class="content_tab">
   <div class="t_bgcolor t_label">
        <cms:input type='checkbox' name='wshop1' opt_values="Titel 1 Lorem ipsum = titel 1 "/>
        <p class="t_date_label"><cms:input type='checkbox' name='d_wshop1' opt_values=" Januar 2015= januar | Februar 2015 = februar 2015 | März 2015 = märz 2015" /></p>
      </div>
      <div class="t_nobgcolor t_label">
        <cms:input type='checkbox' name='wshop2' opt_values="Titel 2 Lorem ipsum = titel 2 "/>
        <p class="t_date_label"><cms:input type='checkbox' name='d_wshop' opt_values=" Januar 2015= januar | Februar 2015 = februar 2015 | März 2015 = märz 2015" /></p>
      </div>
      <div class="t_bgcolor t_label">
        <cms:input type='checkbox' name='wshop3' opt_values="Titel 3 Lorem ipsum = titel 3 "/>
        <p class="t_date_label"><cms:input type='checkbox' name='d_wshop3' opt_values=" Januar 2015= januar | Februar 2015 = februar 2015 | März 2015 = märz 2015" /></p>
      </div>
    </div>
     <!-- intensivecoaching-->
    <div id="tab3" class="content_tab">
      <div class="t_bgcolor t_label">
        <cms:input type='checkbox' name='coach1' opt_values="Titel 1 Lorem ipsum = titel 1 "/>
        <p class="t_date_label"><cms:input type='checkbox' name='d_coach1' opt_values=" Januar 2015= januar | Februar 2015 = februar 2015 | März 2015 = märz 2015" /></p>
      </div>
      <div class="t_nobgcolor t_label">
        <cms:input type='checkbox' name='coach2' opt_values="Titel 2 Lorem ipsum = titel 2 "/>
        <p class="t_date_label"><cms:input type='checkbox' name='d_coach2' opt_values=" Januar 2015= januar | Februar 2015 = februar 2015 | März 2015 = märz 2015" /></p>
      </div>
      <div class="t_bgcolor t_label">
        <cms:input type='checkbox' name='kurs3' opt_values="Titel 3 Lorem ipsum = titel 3 "/>
        <p class="t_date_label"><cms:input type='checkbox' name='d_coach3' opt_values=" Januar 2015= januar | Februar 2015 = februar 2015 | März 2015 = märz 2015" /></p>
      </div>
    </div>
     <!-- mentoring-->
    <div id="tab4" class="content_tab">
    <div class="t_bgcolor">
  Dieses Programm wird erst ab 2015 angeboten. Termine werden rechtzeitig auf unserer Website bekannt gegeben 
  </div>
    </div>
</div>

[KK]

Hi Tanja,

It looks like a JavaScript issue to me - not exactly my forte, I am afraid
Perhaps @cheesypoof or others from our community, better versed in JS than me, could spot something?

hi KK!

Thanks for the fast reply and for a hint where the problme lies!

best regards

tanja

[KK]

You can use cms:not_empty tag to test if a variable has any content before outputting it e.g.

Code: Select all

<cms:each k_success sep='\n'>
   <cms:if "<cms:not_empty item />" >
      <cms:show item /><br>
   </cms:if>
</cms:each>

If you are using single values, you'll have to test each variable individually before printing it out e.g.

Code: Select all

<cms:if "<cms:not_empty frm_name />" >
  <cms:show frm_name /><br>
</cms:if>

<cms:if "<cms:not_empty frm_address />" >
  <cms:show frm_address /><br>
</cms:if>

Hope this helps.