Show/Hide Content based on drop down Selection

Hi All,

I am currently trying to display a drop down list dependent on the users selection in the first drop down list.

I have tried the following:

FORM HTML SECTION: (I have a call to a javascript function on change)

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Vehicle Type</label>
<select class="cf_inputbox validate-selection" id="select_5" size="1" title="Please choose your vehicle" name="select_5" onChange="pricing_call();>
<option value="">Choose Option</option>
<option value="1">Medium Car</option>
<option value="2">Toyota Hilux</option>
<option value="3">Toyota Hilux Cage</option>
<option value="4">Toyota HiAce</option>
<option value="5">Toyota Tarargo</option>

</select>

</div>
<div class="cfclear"> </div>
</div>

EXAMPLE OF A NAMED DIV I WANT TO INITIALLY HIDE
<div class="div_select_20">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Car length of hire</label>
<select class="cf_inputbox validate-selection" id="select_20" size="1" title="" name="select_20">
<option value="">Choose Option</option>
<option value="1 day $61">1 day $61</option>
<option value="2 days $122">2 days $122</option>
<option value="3 days $153">3 days $153</option>
<option value="4 days $204">4 days $204</option>
<option value="5 days $255">5 days $255</option>
<option value="6 days $267">6 days $267</option>
<option value="7 days $288">7 days $288</option>

</select>

</div>
<div class="cfclear"> </div>
</div>

FORM JAVASCRIPT SELECTION:
onload="document.getElementById("div_select_20").style.display='none';"
onload="document.getElementById("div_select_21").style.display='none';"
onload="document.getElementById("div_select_22").style.display='none';"
onload="document.getElementById("div_select_24").style.display='none';"
onload="document.getElementById("div_select_25").style.display='none';"

function pricing_call(){
// Make sure the element exists before calling it's properties
if (document.form1.select_5.value == 1) {
document.getElementById("select_20").style.display = 'inline';
} else {
document.getElementById("select_20").style.display = 'none';
}


===========================================================================================

Currently nothing seems to happen.

I can make this work in ASP using table row id's but less familiar with PHP/Joomla/Chrono working as a combo together.

Any help or guidance would be very appreciated.

Okay I have put the form in a table.

<TR>
<TD>
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Vehicle Type</label>
    <select class="cf_inputbox validate-selection" id="select_5" size="1" title="Please choose your vehicle"  name="select_5" onChange="rates();">
    <option value="">Choose Option</option>
      <option value="1">Medium Car</option>
<option value="2">Toyota Hilux</option>
<option value="3">Toyota Hilux Cage</option>
<option value="4">Toyota HiAce</option>
<option value="5">Toyota Tarargo</option>

    </select>
    
  </div>
  <div class="cfclear"> </div>
</div>
</TD>
</TR>

<TR id="select_20_row" name="select_20_row" style="display:none;">
<TD>
<div class="div_select_20">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Car length of hire</label>
    <select class="cf_inputbox validate-selection" id="select_20" size="1" title=""  name="select_20">
    <option value="">Choose Option</option>
      <option value="1 day $61">1 day $61</option>
<option value="2 days $122">2 days $122</option>
<option value="3 days $153">3 days $153</option>
<option value="4 days $204">4 days $204</option>
<option value="5 days $255">5 days $255</option>
<option value="6 days $267">6 days $267</option>
<option value="7 days $288">7 days $288</option>

    </select>
    
  </div>
  <div class="cfclear"> </div>
</div>
</TD>
</TR>

And then the javascript:

function rates(){ 
    // Make sure the element exists before calling it's properties 
    if (document.getElementById("select_5").value == 1) { 
        document.getElementById("select_20").style.display = 'inline'; 
      } else {
        document.getElementById("select_20").style.display = 'none'; 
      } 
	  
	  if (document.getElementById("select_5").value == 2) { 
        document.getElementById("select_21").style.display = 'inline'; 
      } else {
        document.getElementById("select_21").style.display = 'none'; 
      } 
	  
	   if (document.getElementById("select_5").value == 3) { 
        document.getElementById("select_22").style.display = 'inline'; 
      } else {
        document.getElementById("select_22").style.display = 'none'; 
      } 
	  
	   if (document.getElementById("select_5").value == 4) { 
        document.getElementById("select_24").style.display = 'inline'; 
      } else {
        document.getElementById("select_24").style.display = 'none'; 
      } 

 if (document.form1.getElementById("select_5").value == 5) { 
        document.getElementById("select_25").style.display = 'inline'; 
      } else {
        document.getElementById("select_25").style.display = 'none'; 
      } 
 
}

My rows are now hidden but I the onchange doesn't work?

SOLVED

Was calling the wrong ID.

Fresh eyes for the win

select_20 is not select_20_row😟

Anyway the above is a simple solution for anyone wanting to achieve a conditional show hide.

Hi,

This question is rather belated... I'm trying to do this exact same thing, and so thanks for the post with the completed solution. However, I'm new to Joomla, Chronoforms and CMS in general, and I can program in Java a bit (no experience with JavaScript though). So, my question is: where do you put the JS code in Joomla or Chronoforms to make it work?

It's easy enough to find the code box to modify the HTML code - do you just append any JavaScript you want to add here? Or somewhere else?

I hope someone can see this and answer, as the OP is a year old - sorry! 🙂

Hi Kothos,

Provided that you are using ChronoForms v4 I think this should work OK.

This FAQ tells you how to add Custom HTML - though you may not need to do that.

And this FAQ has more information about using JavaScript.

Bob

Hi!

Thanks for the response; I have found how to modify both the HTML and the JS code now... however, my code isn't working. I have copied the example given and changed the content appropriately (i.e. changed the names and IDs and also the content of course). Any idea what I am missing (as I said, I am a novice at both HTML and JavaScript... I used to program some Java and C, that's about it).

Here is the relevant section of my HTML code; initial question:

<label>Current Scholarship</label><input type="hidden" name="current_scholarship" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="current_scholarship" id="current_scholarship_0" title="" value="Yes" />
<label for="current_scholarship_0">Yes</label>
<input type="radio" name="current_scholarship" id="current_scholarship_1" title="" value="No" />
<label for="current_scholarship_1">No</label>
</div><div class="small-message">Do you already have a scholarship from your home country, or any other source?</div><div class="clear"></div><div id="error-message-current_scholarship"></div></div><div class="ccms_form_element cfdiv_radio radios_over" id="autoID-9ad11dd2b99acb68b9dc3e32b62256e7_container_div" style="">

And here is the question whose appearance is supposed to be conditional:

<TR id="conditional_tuition" name="conditional_tuition" style="display:none;">
<TD>
<label>Extent of Scholarship</label><input type="hidden" name="scholarship_extent" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="scholarship_extent" id="scholarship_extent_0" title="" value="Tuition expenses" />
<label for="scholarship_extent_0">Tuition expenses</label>
<input type="radio" name="scholarship_extent" id="scholarship_extent_1" title="" value="Living expenses" />
<label for="scholarship_extent_1">Living expenses</label>
<input type="radio" name="scholarship_extent" id="scholarship_extent_2" title="" value="Both" />
<label for="scholarship_extent_2">Both</label>
<input type="radio" name="scholarship_extent" id="scholarship_extent_3" title="" value="No answer" />
<label for="scholarship_extent_3">No answer</label>
</div><div class="small-message">What portion of costs will the scholarship(s) cover?</div><div class="clear"></div><div id="error-message-scholarship_extent"></div></div><div class="ccms_form_element cfdiv_radio" id="autoID-c0b298a19cbacd6516454af1eae6a1bb_container_div" style="">
</TD>
</TR>

And here is my JS code:

function rates(){ 
    // Make sure the element exists before calling it's properties 
    if (document.getElementById("current_scholarship_0").value == 1) { 
        document.getElementById("conditional_tuition").style.display = 'inline'; 
      } else {
        document.getElementById("conditional_tuition").style.display = 'none'; 
      } 
}

But the form still looks just as if I never modified it? Help! :-)

Hi Kothos,

You can't check radio button settings by looking at the value of the button. The value is an attribute and remains the same whether or not the button is selected.

<input type="radio" name="current_scholarship" id="current_scholarship_0" title="" value="Yes" />

So the value of this is always 'Yes', you check if the value == 1 which is equivalent to asking if the value is NOT false or empty so it will always return true.

Instead check if the button is checked:

if ( $('current_scholarship_0').checked ) {
  . . .
}

Bob

Hi, Thanks heaps for the response!

I can see what you mean - my ignorance of JavaScript had me checking the wrong thing. I've replaced the relevant line with the one you've given, unfortunately it's still not working.

It's odd; no matter what I do the question always displays. For example I tried removing the JS code completely, and just leaving the HTML table, and the question still displays. The line in the table tag

style="display:none;"

Is supposed to make it invisible isn't it?

I'm confused... perhaps this level of coding is beyond my ability for what I'm trying to do (I can code I swear, just not in these languages 😀 )

Hi Kothos,

Please post a link to the form so I can take a quick look in the morning (it's past midnight here).

Bob

Hi,

I replied in a PM... my site isn't hosted right now, but I'd be happy to give you VPN access to my machine if that's okay with you (or maybe I could post screenshots?).

Also was wondering if your book "Chronoforms 3.1 for Joomla! site cookbook" was applicable for Chronoforms 4 (if so I was going to place an order).

cheers!

Hi Kothos,

Got the PM thank you, it's been in the queue. I'm afraid that I don't do VPN links.

There's a FAQ about the book here.

Bob

Ah, no worries. I think I will get the book.

In good news, I got the HTML working - I was missing a <table> tag apparently.

Also, after some research, I got the JS code working as well. I had no idea that the JS code lived in the HTML headers, and that I needed to invoke it every time the radio buttons were clicked, using the "onclick" event.

But, now it's working!

Thanks for your help, I really appreciate it, it has been invaluable.