Problem with creating a double-dropdown

[tsp003]

Hi guys,

I'm having real trouble with the tutorial as described at http://greyhead.net/chronoforms/creating-a-double-drop-down, I think i've followed it very closely and not changed any of the code, but at the final stage it isn't hiding the items that are not needed, They are still there, but disabled. I cannot see why and i've been scratching my head for days over it.

The form code is:

Code: Select all

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label"
      style="width: 150px;">Chapter</label>
    <select class="cf_inputbox" id="chapter" size="1"
      title="" name="chapter">
      <option value="">Choose Option</option>
      <option value="1">Chapter 1</option>
      <option value="2">Chapter 2</option>
    </select>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label"
      style="width: 150px;">Recipe</label>
    <select class="cf_inputbox" id="recipe" size="1"
      title="" name="recipe">
<optgroup label="Chapter 1" id="ch_1"
    disabled="disabled" >
  <option value="a">Recipe a</option>
  <option value="b">Recipe b</option>
  <option value="c">Recipe c</option>
</optgroup>
<optgroup label="Chapter 2" id="ch_2"
    disabled="disabled" >
  <option value="x">Recipe x</option>
  <option value="y">Recipe y</option>
  <option value="z">Recipe z</option>
</optgroup>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="submit"
      id="submit" type="submit" />
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

and in the javascript box is:

Code: Select all

window.addEvent('load', function() {
  var num_chapters = 2
  // hide all the recipes to start with
  for ( var i = 1; i <= num_chapters; i++ ) {
    $('ch_'+i).setStyle('display', 'none');
  }
  $('chapter').addEvent('blur', function() {
    var chapter = $('chapter').value;
    var optgroup = 0;
    for ( var i = 1; i <= num_chapters; i++ ) {
      if ( i == chapter ) {
        $('ch_'+i).disabled = false;
        $('ch_'+i).setStyle('display', 'block');
      } else {
        $('ch_'+i).disabled = true;
        $('ch_'+i).setStyle('display', 'none');
      }
    }
  });
});

Can anyone see what the problem is that causes it not to hide the unwanted values?

Many thanks

[GreyHead]

Hi tsp003 ,

Hmmm . .. works fine in FireFox but fails (with different results) in IE & Chrome

I'll take a look and see if there is a universal solution.

Bob

[GreyHead]

Hi tsp003,

My better research today tells me that IE does not support hiding options or option groups -- apparently deliberately. Oh for web consistency!

I think I've now built some code that appears to work in IE, FireFox and Chrome.

Code: Select all

window.addEvent('load', function() {
  var num_groups = 2
  var groups = new Array;
  for ( var i = 1; i <= num_groups; i++ ) {
   groups[i] = $('ch_'+i);
   $('ch_'+i).remove();
  }
  $('chapter').value = '';

  $('chapter').addEvent('change', function() {
    var group_no = $('chapter').value;
    if ( !group_no ) {
      return;
    }
   $$('#recipe optgroup').each(function(el) {el.remove()});
   $('recipe').appendChild(groups[group_no]);
  });
});

Rather than hiding Option Groups this code takes a copy of them, then removes and replaces them as needed so it gets round the display problems.

With this version you also need to remove the disabled='disabled' attributes from the Form HTML which makes the form a little more friendly to non-JavaScript users.

Bob

[tsp003]

That's brilliant - works a treat.

Thanks so much for the quick reply

[vijayavm]

Hi,
I tried with the java script coding that you have provided, but it doesn't works in any browser. Kindly help me in this regard.

[GreyHead]

Hi vijayavm,

Hard to say, it worked for me and for tsp003 so what is different about your form?

I'm sorry but if you just say "it's broken" then it's impossible to give any kind of helpful answer.

Bob

[vijayavm]

Hi GreyHead,

Thanks for your response, here is my HTML code

Code: Select all

<div class="form_item">
      <div class="form_element cf_dropdown">
        <label class="cf_label"
          style="width: 150px;">Chapter</label>
        <select class="cf_inputbox" id="chapter" size="1"
          title="" name="chapter">
          <option value="">Choose Option</option>
          <option value="1">Chapter 1</option>
          <option value="2">Chapter 2</option>
        </select>
      </div>
      <div class="cfclear">&nbsp;</div>
    </div>

    <div class="form_item">
      <div class="form_element cf_dropdown">
        <label class="cf_label"
          style="width: 150px;">Recipe</label>
        <select class="cf_inputbox" id="recipe" size="1"
          title="" name="recipe">
    <optgroup label="Chapter 1" id="ch_1"
        disabled="disabled" >
      <option value="a">Recipe a</option>
      <option value="b">Recipe b</option>
      <option value="c">Recipe c</option>
    </optgroup>
    <optgroup label="Chapter 2" id="ch_2"
        disabled="disabled" >
      <option value="x">Recipe x</option>
      <option value="y">Recipe y</option>
      <option value="z">Recipe z</option>
    </optgroup>
      </div>
      <div class="cfclear">&nbsp;</div>
    </div>

    <div class="form_item">
      <div class="form_element cf_button">
        <input value="Submit" name="submit"
          id="submit" type="submit" />
      </div>
      <div class="cfclear">&nbsp;</div>
    </div>


and the JavaScript code as follows

Code: Select all

<script type="text/javascript">
    window.addEvent('load', function() {
      var num_groups = 2
      var groups = new Array;
      for ( var i = 1; i <= num_groups; i++ ) {
       groups[i] = $('ch_'+i);
       $('ch_'+i).remove();
      }
      $('chapter').value = '';

      $('chapter').addEvent('change', function() {
        var group_no = $('chapter').value;
        if ( !group_no ) {
          return;
        }
       $$('#recipe optgroup').each(function(el) {el.remove()});
       $('recipe').appendChild(groups[group_no]);
      });
    });
</script>

All values in recipe are disabled in all browsers, kindly can u help me now in this regard.

Thanks in Advance

[GreyHead]

Hi vijayavm,

Looks as though you have to remove the two disabled='disabled' attributes from the Form HTML. I had wrongly though that they could be left in place.

Bob

[picknicker]

Hi Bob,

first I would like to thank you for giving so much input via the forum.

I was using your guide for double drop down boxes for nearly a year.
As now I switched to Chrome, I noticed that the guide will not work in IE and Chrome.

I found your explanation:
viewtopic.php?f=5&t=21267&p=66600&hilit=double+dropdown+chrome#p66600
, but as im no pro in scrpting there is no way for me to transcript it for my page. The main issue is that I´m not using 'Ch_'+i, as my values are "hardcoded". I buyed your Chronoform book yesterday but could not find an answer to my problems.

Maybe you could help me translating the old code to the new one for IE and Chrome?

Thanks in Advance,

Sven

Code: Select all

<div class="form_item">
  <div class="form_element cf_heading">
     <h1 class="cf_text">Anmeldung an Inlineskatekursen</h1>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>
 
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Nachname*</label>
    <input class="cf_inputbox required" maxlength="150" size="30"
title="Pflichtfeld" id="text_1" name="nachname" type="text" />
 
  </div>
  <div class="cfclear">&nbsp;</div>
</div>


<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Vorname*</label>
    <input class="cf_inputbox required" maxlength="150" size="30"
title="Pflichtfeld" id="text_2" name="vorname" type="text" />
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Straße, Nr.*</label>
    <input class="cf_inputbox required" maxlength="150" size="30"
title="Pflichtfeld" id="text_7" name="strasse" type="text" />
 
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">PLZ*</label>
    <input class="cf_inputbox required validate-number" maxlength="150"
size="30" title="Pflichtfeld" id="text_6" name="plz" type="text" />
 
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Ort*</label>
    <input class="cf_inputbox required" maxlength="150" size="30"
title="Pflichtfeld" id="text_8" name="ort" type="text" />
 
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Telefon</label>
    <input class="cf_inputbox required" maxlength="150" size="30"
title="Pflichtfeld" id="text_33" name="telefon" type="text" />
 
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">E-Mail</label>
    <input class="cf_inputbox required validate-email" maxlength="150"
size="30" title="Pflichtfeld" id="text_9" name="email" type="text" />
 
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<hr />
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label"
      style="width: 150px;">Kursort wählen:</label>
    <select class="cf_inputbox required validate-selection" id="kursort"
size="1"
      title="Kursort wählen" name="stadt">
      <option value="">Kursort wählen</option>
      <option value="Bad Salzuflen">Bad Salzuflen</option>
      <option value="Bochum">Bochum</option>
      <option value="Bonn">Bonn</option>
      <option value="Detmold">Detmold</option>     
      <option value="Düsseldorf">Düsseldorf</option>
      <option value="Duisburg">Duisburg</option>
      <option value="Herford">Herford</option>
      <option value="Koeln">Köln</option>
      <option value="Oberhausen">Oberhausen</option>
      <option value="Wuppertal">Wuppertal</option>
    </select>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label"
      style="width: 150px;">Kursdatum wählen:</label>
    <select class="cf_inputbox required validate-selection" id="kursdatum"
size="1"
      title="Datum wählen" name="Kursdatum">

<option value="">Datum wählen</option>

<optgroup label="Bad Salzuflen" id="badsalzuflen"
    disabled="disabled" >
</optgroup>

<optgroup label="Bochum" id="bochum"
    disabled="disabled" >
</optgroup>

<optgroup label="Bonn" id="bonn"
    disabled="disabled" >
</optgroup>

<optgroup label="Dortmund" id="dortmund"
    disabled="disabled" >
</optgroup>

<optgroup label="Detmold" id="detmold"
    disabled="disabled" >
</optgroup>

<optgroup label="Duisburg" id="duisburg"
    disabled="disabled" >
</optgroup>

<optgroup label="Düsseldorf" id="duesseldorf"
    disabled="disabled" >
  <option value="05.02.2012">04.02.2012 Düsseldorf</option>
  <option value="26.02.2012">26.02.2012 Düsseldorf</option>
  <option value="18.03.2012">18.03.2012 Düsseldorf</option>
  <option value="22.04.2012">22.04.2012 Düsseldorf</option>
  <option value="13.05.2012">13.05.2012 Düsseldorf</option>
  <option value="03.06.2012">03.06.2012 Düsseldorf</option>
  <option value="17.06.2012">17.06.2012 Düsseldorf</option>
  <option value="01.07.2012">01.07.2012 Düsseldorf</option>
  <option value="19.08.2012">19.08.2012 Düsseldorf</option>
  <option value="09.09.2012">09.09.2012 Düsseldorf</option>
  <option value="23.09.2012">23.09.2012 Düsseldorf</option>
  <option value="21.10.2012">21.10.2012 Düsseldorf</option>
  <option value="17.11.2012">17.11.2012 Düsseldorf</option> </optgroup>

<optgroup label="Herford" id="herford"
    disabled="disabled" >
</optgroup>

<optgroup label="Koeln" id="koe"
    disabled="disabled" >
<option value="04.02.2012">04.02.2012 Köln</option>
<option value="03.03.2012">03.03.2012 Köln</option>
<option value="11.03.2012">11.03.2012 Köln</option>
<option value="31.03.2012">31.03.2012 Köln</option>
<option value="15.04.2012">15.04.2012 Köln</option>
<option value="29.04.2012">29.04.2012 Köln</option>
<option value="12.05.2012">12.05.2012 Köln</option>
<option value="02.06.2012">02.06.2012 Köln</option>
<option value="25.08.2012">25.08.2012 Köln</option>
<option value="22.09.2012">22.09.2012 Köln</option>
<option value="27.10.2012">27.10.2012 Köln</option> </optgroup>

<optgroup label="Oberhausen" id="oberhausen"
    disabled="disabled" >

</optgroup>

<optgroup label="Wuppertal" id="wuppertal"
    disabled="disabled" >
  <option value="12.02.2012">12.02.2012 Wuppertal</option>
  <option value="04.03.2012">04.03.2012 Wuppertal</option>
  <option value="25.03.2012">25.03.2012 Wuppertal</option>
  <option value="14.04.2012">14.04.2012 Wuppertal</option>
  <option value="12.05.2012">12.05.2012 Wuppertal</option>
  <option value="03.06.2012">03.06.2012 Wuppertal</option>
  <option value="24.06.2012">24.06.2012 Wuppertal</option>
  <option value="26.08.2012">26.08.2012 Wuppertal</option>
  <option value="16.09.2012">16.09.2012 Wuppertal</option>
  <option value="07.10.2012">07.10.2012 Wuppertal</option>
  <option value="28.10.2012">28.10.2012 Wuppertal</option> </optgroup>

<optgroup label="Hamburg" id="ham"
    disabled="disabled" >
</optgroup>


    </select>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h5 class="cf_text">Bitte die gewüschten Kurse und Teilnehmerzahl wählen.</h5>

  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_multiholder"
style="margin-left:0px!important;">
     <label class="cf_label" style="display: none;">Auswahl-Level</label>
    <table cellspacing="0" cellpadding="0" width="95%" title=""
class="multi_container">
        <tbody width="100%">
            <tr width="100%">
                <td style="width: auto; vertical-align: middle; text-align:
left;">
               
               
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 60px;">LEVEL 1 <span style="font-size:80%">(je 29 Euro)</span></label>
    <select class="cf_inputbox" id="select_12" size="1" title=""
name="level1">
    <option value="">Anzahl</option>
      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

    </select>
   
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

</td>
<td style="width: auto; vertical-align: middle; text-align: left;"> <div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 60px;">LEVEL 2 <span style="font-size:80%">(je 29 Euro)</span></label>
    <select class="cf_inputbox" id="select_14" size="1" title=""
name="level2">
    <option value="">Anzahl</option>
      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

    </select>
   
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

</td>
<td style="width: auto; vertical-align: middle; text-align: left;"> <div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 60px;">LEVEL 3 <span style="font-size:80%">(je 29 Euro)</span></label>
    <select class="cf_inputbox" id="select_13" size="1" title=""
name="level3">
    <option value="">Anzahl</option>
      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

    </select>
   
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

</td>
<td style="width: auto; vertical-align: middle; text-align: left;"> <div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 65px;">BAMBINI 1 <span style="font-size:80%">(je 13 Euro)</span></label>
    <select class="cf_inputbox" id="select_16" size="1" title=""
name="bambini1">
    <option value="">Anzahl</option>
      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

    </select>
   
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

</td>
<td style="width: auto; vertical-align: middle; text-align: left;">

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 65px;">BAMBINI 2 <span style="font-size:80%">(je 13 Euro)</span>)</label>
    <select class="cf_inputbox" id="select_15" size="1" title=""
name="bambini2">
    <option value="">Anzahl</option>
      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

    </select>
   
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

</td>
<td style="width: auto; vertical-align: middle; text-align: left;"> <div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 65px;">BAMBINI 3 <span style="font-size:80%">(je 25 Euro)</span></label>
    <select class="cf_inputbox" id="select_17" size="1" title=""
name="bambini3">
    <option value="">Anzahl</option>
      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

    </select>
   
  </div>
  <div class="cfclear">&nbsp;</div>
</div>
</td>

            </tr>
        </tbody>
    </table>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_multiholder"
style="margin-left:0px!important;">
     <label class="cf_label" style="display: none;">Alter-multi</label>
    <table cellspacing="0" cellpadding="0" width="95%" title=""
class="multi_container">
    <tbody width="100%">
    <tr width="100%">
    <td style="width: auto; vertical-align: middle; text-align: left;">
    <div class="form_item">
          <div class="form_element cf_radiobutton">
           <label class="cf_label" style="width: 240px;">Sind alle Teilnehmer volljährig?</label>
          <div class="float_left">
             <input value="Ja" title="Bitte angeben" class="radio validate-one-required" id="radio00" name="radio0" type="radio" />
             <label for="radio00" class="radio_label">Ja</label>
             <br />
            <input value="Nein" title="Bitte angeben" class="radio validate-one-required" id="radio01" name="radio0" type="radio" />
               <label for="radio01" class="radio_label">Nein</label>
               <br />
          </div>   
        </div>
        <div class="cfclear">&nbsp;</div>
   </div>
   </td>
   <td style="width: auto; vertical-align: middle; text-align: left;">
   <div class="form_item">
      <div class="form_element cf_textbox">
          <label class="cf_label" style="width: 200px;">Hier das Alter angeben</label>
            <input class="cf_inputbox" maxlength="150" size="30" title=""
id="text_22" name="alter" type="text" />
         </div>
        <div class="cfclear">&nbsp;</div>
   </div>
   </td>
   </tr>
    </tbody>
    </table>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>


<div class="form_item">
  <div class="form_element cf_multiholder"
style="margin-left:0px!important;">
     <label class="cf_label" style="display: none;">Leihskates-multi</label>
    <table cellspacing="0" cellpadding="0" width="95%" title=""
class="multi_container">
    <tbody width="100%">
    <tr width="100%">
    <td style="width: auto; vertical-align: middle; text-align: left;">
      <div class="form_item">
           <div class="form_element cf_radiobutton">
             <label class="cf_label" style="width: 240px;">Benötigen Sie Leihskates?</label>
             <div class="float_left">
                <input value="Ja" title="Bitte angeben" class="radio validate-one-required" id="radio10" name="radio1" type="radio" />
                <label for="radio10" class="radio_label">Ja</label>
                <br />
                <input value="Nein" title="Bitte angeben" class="radio validate-one-required" id="radio11" name="radio1" type="radio" />
                <label for="radio11" class="radio_label">Nein</label>
                <br />
               </div>
       
         </div>
           <div class="cfclear">&nbsp;</div>
      </div>
      </td>
      <td style="width: auto; vertical-align: middle; text-align: left;">
      <div class="form_item">
           <div class="form_element cf_textbox">
             <label class="cf_label" style="width: 200px;">Bitte Größe der Leihskates angeben (5 Euro pro Paar)</label>
             <input class="cf_inputbox" maxlength="150" size="30" title=""
id="text_23" name="groesse" type="text" />
           </div>
           <div class="cfclear">&nbsp;</div>
      </div>
      </td>
       </tr>
        </tbody>
       </table>
     </div>
  <div class="cfclear">&nbsp;</div>
</div>



<div class="form_item">
  <div class="form_element cf_multiholder"
style="margin-left:0px!important;">
     <label class="cf_label" style="display: none;">Schoner-Multi</label>
    <table cellspacing="0" cellpadding="0" width="95%" title=""
class="multi_container">
    <tbody width="100%">
    <tr width="100%">
    <td style="width: auto; vertical-align: middle; text-align: left;">
   <div class="form_item">
        <div class="form_element cf_radiobutton">
          <label class="cf_label" style="width: 240px;">Schutzausrüstung leihen??</label>
          <div class="float_left">
               <input value="Ja" title="Bitte angeben" class="radio validate-one-required" id="radio20" name="radio2" type="radio" />
               <label for="radio20" class="radio_label">Ja</label>
               <br />
               <input value="Nein" title="Bitte angeben" class="radio validate-one-required" id="radio21" name="radio2" type="radio" />
               <label for="radio21" class="radio_label">Nein</label>
               <br />
            </div>
        </div>
        <div class="cfclear">&nbsp;</div>
   </div>
   </td>
   <td style="width: auto; vertical-align: middle; text-align: left;">
   <div class="form_item">
        <div class="form_element cf_textbox">
       <label class="cf_label" style="width: 200px;">Art und Anzahl der Schoner</label>
       <input class="cf_inputbox" maxlength="150" size="30" title=""
id="text_25" name="schoner" type="text" />
     </div>
     <div class="cfclear">&nbsp;</div>
  </div>
  </td>
  </tr>
  </tbody>
  </table>
</div>
  <div class="cfclear">&nbsp;</div>
</div>

<input value="" id="hidden_25" name="gezahlt" type="hidden" />

<input value="" id="hidden_23" name="platzhalter" type="hidden" />

<input value="" id="hidden_24" name="abgesagt" type="hidden" />

<hr />

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 250px;">Bitte ggfs.
Gutscheinnummer eintragen:</label>
    <input class="cf_inputbox" maxlength="10" size="10" title=""
id="text_34" name="gutscheinnr" type="text" />
    </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 200px;">Weitere Anmerkungen:</label>
    <textarea class="cf_inputbox" rows="3" id="text_32" title="" cols="25"
name="kommentar"></textarea>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>



<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" display:inline style="width: 240px;">Anmeldung am Newsletter?</label>
    <div class="float_left">
      <input value="Ja" title="Bitte angeben" class="radio validate-one-required" id="radio30" name="radio3" type="radio" />
      <label for="radio30" class="radio_label">Ja gerne</label>
      <br />
     <input value="Nein" title="Bitte angeben" class="radio validate-one-required" id="radio31" name="radio3" type="radio" />
      <label for="radio31" class="radio_label">lieber nicht</label>
    </div> 
    <a class="tooltiplink" onclick="return false;"><img height="16"
border="0" width="16" class="tooltipimg" alt=""
src="components/com_chronocontact/css/images/tooltip.png"/></a>
   <div class="tooltipdiv">:: Ihre Emailadresse wird nicht weitergereicht!</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>
<br>


<b>Die Bezahlung der Skatekurse erfolgt bar am Schulungsort.</b>

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 250x;">Ich habe die <a target="_blank" href="http://www.skateschule.net/agb_2008.pdf">AGB</a> und das Rücktrittsrecht</label>
    <div class="float_left">
      <input value="AGB" title="Pflichtangabe" class="radio validate-one-required" id="check30" name="check3[]" type="checkbox" />
      <label for="check30" class="check_label">zur Kenntnis genommen</label>
      <br /> 
   </div>
   <div class="cfclear">&nbsp;</div>
</div>
</div> 

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Anmeldung absenden" name="button_26" type="submit" />
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<p><strong>Rücktritts- &amp; Kündigungsrecht:</strong><span
style="font-size: 8pt;"> Der angemeldete Einzelteilnehmer ist berechtigt, bis spätestens 1 Woche vor Kursbeginn (Zugang bei der Skateschule NRW
entscheidet!) kostenfrei vom Vertrag zurückzutreten. Bei Veranstaltungen ist ein kostenfreier Rücktritt bis zu 14 Tage vor Veranstaltungsbeginn möglich. Bei einem späteren Rücktritt ist der Teilnehmer zur Zahlung der kompletten Kursgebühren verpflichtet. Eine ärztlich attestierte Ausfallzeit wird gutgeschrieben. Eine Nichtteilnahme ist der Skateschule NRW jedoch in jedem Fall unverzüglich ab Kenntnis der Verhinderung anzuzeigen.
Datenschutz: Wir speichern und verarbeiten Ihre Daten, soweit geschäftsnotwendig und nach dem Datenschutzgesetzen zulässig. Eine Weitergabe der Daten erfolgt nicht</span></p>


----------------------


window.addEvent('load', function() {
        $('badsalzuflen').setStyle('display', 'none');
        $('bochum').setStyle('display', 'none');
        $('bonn').setStyle('display', 'none');
        $('detmold').setStyle('display', 'none');
       $('duisburg').setStyle('display', 'none');
       $('duesseldorf').setStyle('display', 'none');
        $('herford').setStyle('display', 'none');
       $('koe').setStyle('display', 'none');
       $('ham').setStyle('display', 'none');
         $('oberhausen').setStyle('display', 'none');
       $('wuppertal').setStyle('display', 'none');
       $('dortmund').setStyle('display', 'none');

  $('kursort').addEvent('blur', function() {
    var stadt = $('kursort').value;
    var optgroup = 0;

   document.ChronoContact_Skatekurse_Anmeldung_DF7.kursdatum.selectedIndex = 0;
       $('badsalzuflen').disabled = true;
   $('badsalzuflen').setStyle('display', 'none');
       $('bochum').disabled = true;
   $('bochum').setStyle('display', 'none');
       $('bonn').disabled = true;
   $('bonn').setStyle('display', 'none');
       $('detmold').disabled = true;
   $('detmold').setStyle('display', 'none');
        $('duisburg').disabled = true;
   $('duisburg').setStyle('display', 'none');
        $('duesseldorf').disabled = true;
   $('duesseldorf').setStyle('display', 'none');
       $('herford').disabled = true;
   $('herford').setStyle('display', 'none');
       $('koe').disabled = true;
   $('koe').setStyle('display', 'none');
       $('ham').disabled = true;
   $('ham').setStyle('display', 'none');
       $('dortmund').disabled = true;
   $('dortmund').setStyle('display', 'none');
          $('oberhausen').disabled = true;
   $('oberhausen').setStyle('display', 'none');
       $('wuppertal').disabled = true;
   $('wuppertal').setStyle('display', 'none');

      if (stadt ==  "Bad Salzuflen") {
         $('badsalzuflen').disabled = false;
    $('badsalzuflen').setStyle('display', 'block');
        }
     if (stadt ==  "Bochum") {
         $('bochum').disabled = false;
    $('bochum').setStyle('display', 'block');
       }
      if (stadt ==  "Bonn") {
         $('bonn').disabled = false;
    $('bonn').setStyle('display', 'block');
       }
      if (stadt ==  "Detmold") {
         $('detmold').disabled = false;
    $('detmold').setStyle('display', 'block');
        }
      if (stadt ==  "Duisburg") {
         $('duisburg').disabled = false;
    $('duisburg').setStyle('display', 'block');
       }       
      if (stadt ==  "Düsseldorf") {
         $('duesseldorf').disabled = false;
    $('duesseldorf').setStyle('display', 'block');
       } 
      if (stadt ==  "Dortmund") {
         $('dortmund').disabled = false;
    $('dortmund').setStyle('display', 'block');
       }
      if (stadt ==  "Herford") {
         $('herford').disabled = false;
    $('herford').setStyle('display', 'block');
        }
      if (stadt ==  "Koeln") {
         $('koe').disabled = false;
    $('koe').setStyle('display', 'block');
       }
      if (stadt ==  "Hamburg") {
         $('ham').disabled = false;
    $('ham').setStyle('display', 'block');
       }
      if (stadt ==  "Oberhausen") {
         $('oberhausen').disabled = false;
    $('oberhausen').setStyle('display', 'block');
       }
       if (stadt ==  "Wuppertal") {
         $('wuppertal').disabled = false;
    $('wuppertal').setStyle('display', 'block');
       }
  });
});


[GreyHead]

Hi Sven,

A very late reply but this FAQ may help.

Bob

[btake]

Hi Bob,

I made a little change in the code of the FAQ.
If the choice in the 2nd dropdown is the 1st one, I need to change to another and back to 1st. And in my tables (states and cities) I've 1 "state" with only one city and I can't change that.
My change in the code:

Code: Select all

<?php
$results = array();
foreach ( $form->data['cities'] as $v ) {
  $results[] = $v['id'].'='.$v['name'];
}
$results = implode("\n", $results);
$pre = '=Select';
$results = $pre."\n".$results;
echo $results;
$mainframe =& JFactory::getApplication();
$mainframe->close();
?>

PS. In the last block of code of the FAQ (whole code), the "echo" line is missing.

Tks.
Roberto

[GreyHead]

Hi Roberto,

Thank you, I've updated the FAQ to include your suggestions and correct the missing line.

Bob

[btake]

Thank you.

Your way is better.

Roberto

[BlackSun]

Hi

I tried the solution that is here but I'm having a Javascript error on the page when I select something from the first dropdown, here is my code:

Code: Select all

<select id="recipe" name="recipe">
<optgroup label="test" id="ch_1">
  <option value="blabla">something here</option>
  <option value="blabla">something here</option>
</optgroup>

<optgroup label="test244" id="ch_2">
  <option value="blabla">something here</option>
  <option value="blabla">something here</option>
</optgroup>

<optgroup label="testtt" id="ch_3">
  <option value="blabla">something here</option>
  <option value="blabla">something here</option>
</optgroup>

<optgroup label="testt23521" id="ch_4">
  <option value="blabla">something here</option>
  <option value="blabla">something here</option>
</optgroup>

<optgroup label="teeesstt" id="ch_5">
  <option value="blabla">something here</option>
  <option value="blabla">something here</option>
</optgroup>
</select>

and the JS code is:

Code: Select all

window.addEvent('load', function() {
  var num_groups = 5;
  var groups = new Array;
  for ( var i = 1; i <= num_groups; i++ ) {
   groups[i] = $('ch_'+i);
   $('ch_'+i).remove();
  }
  $('chapter').value = '';

  $('chapter').addEvent('change', function() {
    var group_no = $('chapter').value;
    if ( !group_no ) {
      return;
    }
   $('#recipe optgroup').each(function(el) {el.remove()});
   $('recipe').appendChild(groups[group_no]);
  });
});

And the JS error that I receive is: TypeError: Cannot call method 'each' of null

Could you PLEASE help me with this?
Thank you

[GreyHead]

Hi BlackSun,

Which version of Joomla! and ChronoForms are you using?
You can find the ChronoForms version from Site Admin | Extensions | Install/Uninstall | Components in Joomla! 1.5 or Site Admin | Extensions | Extension Manager | Manage in Joomla! 1.6/1.7/2.5.

The code was originally written for ChronoForms v3.

Bob