What is the best method to dynamically changing form content?

[Antoine]

I am building a form for clients to use to request a project. However, because I specialize in a wide variety of projects, the form will need to be different depending on which type of project is needed.

I thought I had this figured out with Javascript, but it doesn't seem to be working right.

I had the following Javascript code to add/remove a CSS "display:none" class called hide depending on which option was selected.

The code looked like this:

<script type="text/javascript">
	function showSelection () {
		var e, i = 0;
		while (e = document.getElementById ('projectType').options [i++]) {
			document.getElementById (e.value).className = 'hide'
		}
		document.getElementById (document.getElementById ('projectType').options [document.getElementById ('projectType').selectedIndex].value).className = '';
	}

	if (document.getElementById) onload = function () {
		showSelection ();
		document.getElementById ('projectType').onchange = showSelection;
	}
</script>

and then below it (this was in the 'body'), was:

<select id="projectType">
<option selected value="none"> -- Select Project Type -- </option>
<option value="logo_design">Logo Design</option>
<option value="web_design">Web Design</option>
<option value="print">Print Design</option>
<option value="powerpoint">PowerPoint Presentation</option>
<option value="corpid">Corporate ID</option>
<option value="other">Other</option>
</select>

<p id="none"></p>

<!-- Start Logo Design Content -->
<p id="logo_design">LOGO</p>


<!-- Start Web Design Content -->
<p id="web_design">WEB</p>


<!-- Start Print Design Content -->
<p id="print">PRINT</p>


<!-- Start PowerPoint Content -->
<p id="powerpoint">POWERPOINT</p>


<!-- Start Corporate ID Content -->
<p id="corpid">CORPORATE ID</p>


<!-- Start Other Type Content -->
<p id="other">OTHER</p>

This works fine too. However, when I try adding to the <p> content (i.e. adding some radio buttons or textareas, they are displayed regardless of which option is selected.

Is there a flaw in my code, or is this not the right method to do this?

I thought maybe trying to change the src of an iframe based on what option was selected, but I'm not sure if/how that would work (i.e. where would I call the form?).

I also thought of using PHP and submitting it to itself, which would mean I would have to submit the selection before the form is displayed. This is not the most ideal way, but it would be more versatile and would definitely work, I guess.

What about a client-side include? I have never used this, but if this method would work, I am up for the challenge!

Does anyone have any suggestions? Please provide some code too.. I'm no developer!

Thanks,
Antoine

[jamiemac2005]

hey what about:

javascript:
function changeContent(projectTypeValue){
  //get a handle of the content <p> element
  var contentToChange = document.getElementById("content");
  //change it's innerHTML depending on the value input
  if(projectTypeValue=="logo_design"){
    contentToChange.innerHTML = "the html to go inside the paragraph element when logodesign is selected";
  }
//..and so on for each type

}

...
HTML:
<select id="projectType" onchange="changeContent(this.value);">
<option selected value="none"> -- Select Project Type -- </option>
<option value="logo_design">Logo Design</option>
<option value="web_design">Web Design</option>
<option value="print">Print Design</option>
<option value="powerpoint">PowerPoint Presentation</option>
<option value="corpid">Corporate ID</option>
<option value="other">Other</option>
</select>
<p id="content"><!--Starts empty --></p>

or you could use a string-indexed array to store the values:

var values = new Array();
values["none"]        = "Please select a project type above";
values["logo_design"]        = "<input type='text' />";
values["web_design"]        = "...code to use when webdesign is selected";
values["print"]        = "...code to use when print is selected";
values["powerpoint"]        = "...code to use when powerpoint is selected";
values["corpid"]        = "...code to use when corpid is selected";
values["other"]        = "...code to use when other is selected";

function changeContent(projectTypeValue){
  //get a handle of the content <p> element
  var contentToChange = document.getElementById("content");
  //change it's innerHTML depending on the value input
  contentToChange.innerHTML = values[projectTypeValue];
}

Give them a try.

Cheers,
Jamey

[Antoine]

Hmm...

Thanks Jamey for the quick reply, and the code! That's a big help!

However, it doesn't seem to work. I added the code and inserted "logoform.html" into the value and when I clicked on the logo design option, my entire body div seemed to disappear (just a header and footer) and I saw the text "logoform.html". I also tried "index.html" and got the same response...

Did I input the code correctly?

I was wondering if it would be just as efficient to make the select tag self submit to PHP and call up the form content that way..?

Thanks again!

[jamiemac2005]

Hey, could you post your latest code?

It could be easier to self-submit the select element but it would be a slower process(to the end user)