[SOLVED] Using a select to display hidden divs

[KevinM1]

I'm debating whether or not to use JavaScript for this.  I know I can brute-force what I want (more or less) with straight PHP, but where would the fun (or learning) with that be?

 

Here's the long and short of it:

 

I have a form with a select element.  Below that, I will have another form, whose pre-generated (but editable by the user) values are determined by what option the user chose vis-a-vis the select element. 

 

Currently, the script I'm rewriting doesn't display the second/bottom form until the select element's form is submitted.  This submission causes the page to reload, with the correct second/bottom form visible.  This is all done by merely setting the first form's action to $_SERVER['PHP_SELF'] and letting PHP do its thing.

 

I'm leaning towards doing the following: making the select element merely trigger an event which will toggle the visibility of div's with the different forms.  My main concern with this is the state of the toggle.  So, if I select the first option, then decide on the fourth, the form changes to the correct one.

 

My thoughts, in code form, are --

 

HTML:

.
.
.
<select id="catSwitch">
   <option value="#">Select a Category</option>
   <option value="#">-----------------------</option>
   <option value="1">Category 1</option>
   <option value="2">Category 2</option>
   <option value="3">Category 3</option>
   <option value="4">Category 4</option>
</select>
.
.
.
<div id="catDiv1" style="display: none;">
   <form id="form1" ... >
   </form>
</div>

<div id="catDiv2" style="display: none;">
   <form id="form2" ... >
   </form>
</div>
.
.
.

 

JavaScript:

var W3CDOM = (document.createElement && document.getElementsByTagName);



function init(){

   if (!W3CDOM) return;

   var catSwitch = document.getElementById('catSwitch');
   catSwitch.onchange = switchForms;
}

function switchForms(evt){
   evt = (evt) ? evt : ((event) ? event : null);



   if(evt){

      var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

        

      if(elem){
         toggle(elem.value); //toggle the form based on elem.value
      }
   }
}

function toggle(value){
   //how do I deal with the previous div-element, so I can turn it's display back off?
   var nextDiv = document.getElementById('catDiv' + value);
   nextDiv.style.display = 'block';
}

window.onload = init;

 

Am I on the right track?

 

EDIT: Apologies for the spacing problems in the second code block.  This board never seems to like any code that's pasted in.

[KevinM1]

Apologies for the double-post, but my new idea is too long to append to the end of my previous message.

 

After thinking about this for a bit longer, I realize that all I need to change when the select-element is toggled is the second form's values not the form itself.  The actual structure is the same across the board.  So, would something like --

 

HTML:

.
.
.
<select id="catSwitch">
   <option value="#">Select a Category</option>
   <option value="#">-----------------------</option>
   <option value="1">Category 1</option>
   <option value="2">Category 2</option>
   <option value="3">Category 3</option>
   <option value="4">Category 4</option>
</select>
.
.
.
<div id="catDiv" style="display: none;">
   <form id="catForm" ... >
   </form>
</div>
.
.
.

 

JavaScript:

var W3CDOM = (document.createElement && document.getElementsByTagName);

function init(){
   if (!W3CDOM) return;

   var catSwitch = document.getElementById('catSwitch');
   catSwitch.onchange = switchForms;
}

function switchForms(evt){
   evt = (evt) ? evt : ((event) ? event : null);

   if(evt){
      var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

      if(elem){
         toggle(elem.value); //toggle the form based on elem.value
      }
   }
}

function toggle(value){
   if(value != '#'){
      var nextDiv = document.getElementById('catDiv');
      var catForm = document.getElementById('catForm');
      nextDiv.style.display = 'block';

      if(value == '1'){
         catForm.elements['input1'].value = 'Category 1 value 1';
         catForm.elements['input2'].value = 'Category 1 value 2';
      }
      elseif(value == '2'){
         catForm.elements['input1'].value = 'Category 2 value 1';
         catForm.elements['input2'].value = 'Category 2 value 2';
      }
   }
   else{
      nextDiv.style.display = 'none';
   }
}

window.onload = init;

 

Be more or less correct?

[fenway]

I don't really understand what you're describing.

[KevinM1]

I don't really understand what you're describing.

 

Yeah, I figured that my description would be confusing.  I've made a test file, so that can help demonstrate what I want to do.  Let me paste the code first.

 

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Select Test</title>
<link rel="stylesheet" type="text/css" href="../styles.css" />
<script type="text/javascript" src="configemail.js"></script>
</head>

<body>

<select id="catSwitch">
   <option value="#">Select a Category</option>
   <option value="#">-----------------------</option>
   <option value="1">Category 1</option>
   <option value="2">Category 2</option>
   <option value="3">Category 3</option>
   <option value="4">Category 4</option>
</select>

<div id="catDiv" style="display: none;">
   <form id="catForm" action="" method="POST">
	<p><label for="input1">Input 1: </label><input type="text" name="input1" /></p>
	<p><label for="input2">Input 2: </label><input type="text" name="input2" /></p>
	<input type="submit" name="submit" value="Submit" />
   </form>
</div>

</body>
</html>

 

JavaScript:

var W3CDOM = (document.createElement && document.getElementsByTagName);

function init(){
if (!W3CDOM) return;

var catSwitch = document.getElementById('catSwitch');
catSwitch.onchange = switchForms;
}

function switchForms(evt){
evt = (evt) ? evt : ((event) ? event : null);

if(evt){
	var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

	if(elem){
		alert('Value of the select option: ' + elem.value);
		toggle(elem.value); //toggle the form based on elem.value
	}
}
}

function toggle(value){
var catDiv = document.getElementById('catDiv');
var catForm = document.getElementById('catForm');

if(value != '#'){
	catDiv.style.display = 'block';

	if(value == '1'){
		catForm.elements['input1'].value = 'Category 1 value 1';
		catForm.elements['input2'].value = 'Category 1 value 2';
	}

	if(value == '2'){
		catForm.elements['input1'].value = 'Category 2 value 1';
		catForm.elements['input2'].value = 'Category 2 value 2';
	}
}
else{
	catDiv.style.display = 'none';
}
}

window.onload = init;

 

Here's what I'm attempting to do:

 

If a category is selected (if the value of the option selected != '#'), display a hidden div.

    Within this div is a form.  I want the values of these inputs to change based on what category was selected.

 

Else I want the div to remain hidden.

 

Unfortunately, I have a logic error with my code as I cannot get the div to appear when I select something valid (that is, an option whose value != '#').  I'm thinking it has something to do with getting the value of the options, as the alert function call doesn't fire at all.

 

EDIT: One of two things happened:

 

1. There was some strange caching stuff going on.

2. I was an idiot and didn't include "window.onload = init;" at the bottom of my file.

 

I'm betting on me being an idiot.