Forums

Hi Bob. I hate to keep asking question and bother you all the time but I hope you understand. I am not sure if my code is the problem or there is something behind it that ticking it. I have a two fieldset that I want to show or hide depending on radio button selected. The problem arise when the School radio button is selected, it shows the initial selection which is the District. See image below:
[attachment=1]Screen Shot 2012-04-01 at 11.29.22 AM.png[/attachment]
I wanted to show like this when School is selected. See image below:
[attachment=0]Screen Shot 2012-04-01 at 11.36.24 AM.png[/attachment]
Selecting the district radio button is not a problem when an error arise because it show the right fieldset.
Initially, the District radio button is selected but I wanted to hide if the School is selected and there is a problem to the selection.

<div class="ccms_form_element cfdiv_radio" id="radio_select_container_div"><input type="hidden" name="radio_select" value="" alt="ghost" />
    <input type="radio" name="radio_select" id="radio_select_district" title="" value="District" class="validate['required']" onClick="showHide(this.name);" checked="checked" />
      <label for="radio_select_district">By District</label>
      <input type="radio" name="radio_select" id="radio_select_school" title="" value="School" class="validate['required']" onClick="showHide(this.name);" />
      <label for="radio_select_school">By School</label>
  <div id="error-message-radio_select"></div></div>
  <div> </div>

<fieldset id="district_check">
    <div class="ccms_form_element cfdiv_select" id="district_container_div">
      <label for="district">District Name:</label>
      <?php
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `DistrictCode`, `DistrictName`
FROM `#__district`
ORDER BY `DistrictName`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
?>
      <select size="1" id="district" class="" title="" name="district">
        <option value="">District is required.</option>
        <option value="" selected="selected">Select District</option>
        <?php
foreach($data as $d) {
echo " <option value='".$d->DistrictName."'>".$d->DistrictName."</option>";
}
?>
      </select>
      <div id="error-message-district"></div>
    </div>
</fieldset>
<fieldset id="school_check" style="background-color:#fff;">
    <div class="ccms_form_element cfdiv_select" id="autoID-0e6ef44fd9f37dfa6716fd3ffdb29c14_container_div">
      <label for="school_name">School Name:</label>
      <?php
$db =& JFactory::getDBO();
$query = "
SELECT *
FROM `#__school`
ORDER BY `SchoolName`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
?>
      <select size="1" id="school_name" title="" name="school_name">
        <option value="">School is required.</option>
        <option value="" selected="selected">Select School</option>
        <?php
foreach($data as $d) {
echo " <option value='".$d->SchoolName."'>".$d->SchoolName."</option>";
}
?>
      </select>
      <div class="clear"></div>
      <div id="error-message-school"></div>
    </div>
  </fieldset>
  <div class="ccms_form_element cfdiv_submit" id="autoID-b1dd7568bd8717f9efba014bbeb27c84_container_div"><input name="submit" class="" id="submit" value="Submit" type="submit" />
  <div id="error-message-submit"></div></div>

my JS code (On Load event)

function showHide(){
	if (document.getElementById('radio_select_district').checked){
			document.getElementById('district_check').style.display=""; // this is for showing
			document.getElementById('school_check').style.display="none";
			document.getElementById('school_name').value="";
			if (document.getElementById('district').value == ""){
				alert("District Name cannot be empty. Please make a selection.");
				document.getElementById('district_check').style.display=""; // this is for showing
				document.getElementById('school_check').style.display="none";
				document.getElementById('school_name').value="";
			}
				
	} else {
		if (document.getElementById('radio_select_school').checked){
			document.getElementById('school_check').style.display=""; // this is for showing
			document.getElementById('district_check').style.display="none";
			document.getElementById('district').value="";
			if (document.getElementById('school_name').value == ""){
				alert("School Name cannot be empty. Please make a selection.");
				document.getElementById('school_check').style.display=""; // this is for showing
				document.getElementById('district_check').style.display="none";
				document.getElementById('district').value="";
			}
				
		}
	}
}

I also have a CSSV in place and the truth, I don't know where else to look the error at. Please help as this is making me crazy. Benn working on this for two days. Sometimes it works, the next time is not. I dont know where else to check.
CSSV code:

<?php

$valid = true;

// Get user object -information from Joomla
$radio_select = JRequest::getString('radio_select', '', 'post');
$school_name = JRequest::getString('school_name', '', 'post');
$district = JRequest::getString('district', '', 'post');
$school_name = JRequest::getString('district', '', 'post');
$district_check = JRequest::getString('district_check', '', 'post');

if ($radio_select == "District" && empty($district)){
    $form->validation_errors['district'] = 'You selected the District to search. District name is required.';	
    echo $district_check;
	$valid =false;

}
if ($radio_select == "School" && empty($school_name)){
    $form->validation_errors['school_name'] = 'You selected the School to search. School name is required.';
 echo $school_check;
	$valid =false;

}

return $valid;

?>

The form can be find at http://auw.org/doe/index.php?option=com_chronoforms&chronoform=search_school-Copy. Hope to hear from anyone soon as this is really badly needed to work. Thanks.

At first load where you initially go to the page, it loads ok. But, if you selected the "School" radio button and

just checking if someone have the same problem who wants to share their answers or any suggestions...

Bob??? Any help please? I really cant move forward if this can't be solve. I don't know if my code is the problem or maybe something else.

Hi Jmarian1,

Sorry but as this has next to nothing to do with ChronoForms it does get pushed down the queue a bit.

I can see that you have a showHide() function there but I can't see any code that actually calls it? Have I over-looked it somewhere?

window.addEvent('domready', function() {
  showHide();
});

Bob

Hi Bob, thanks for your input. I didnt think that I need that one because I have other javascript function and it works fine. That is why I wanted to post it here sometimes because I know chronoforms has special way of dealing with javascript and I am not good in mootools or ajax but im willing to learn. Anyway, thank u and will try to include the code you suggested and will let you know. Thanks again.

Thanks Bob. It works like a charm. I know I am missing something because my JS code is correct. Thank you so much!!!