Page 1 of 1

[SOLVED] Using JavaScript to show/hide forms

Posted: Sat Jan 27, 2007 10:56 pm
by tristanlee85
What I've got is a drop-down menu with 3 selections. When a user selects "Loader", I would like

Code: Select all

<div id="load" style='display: none'>content{/div>
to display/un-hide. I've used this code on one of my other scripts and it works just fine, but I'm not sure why it doesn't work here. Here is a basic version of the code. When I select something from the drop-down menu, nothing happens at all.

Code: Select all

<html>
<head>

<script> 
function WhichForm(frm)
   {
   if(!frm.eval_form.selectedIndex == 1)
   frm.eval_form.focus()
   }
</script>
<script> 
function WhichForm(frm)
   {
   if(frm.eval_form.selectedIndex == 1)
   document.getElementById("load").style.display = '';
   else
   document.getElementById("load").style.display = 'none';
   }
</script>
<script> 
function WhichForm(frm)
   {
   if(frm.eval_form.selectedIndex == 2)
   document.getElementById("belt").style.display = '';
   else
   document.getElementById("belt").style.display = 'none';
   }
</script>
<script> 
function WhichForm(frm)
   {
   if(frm.eval_form.selectedIndex == 3)
   document.getElementById("ic").style.display = '';
   else
   document.getElementById("ic").style.display = 'none';
   }
</script>
</head>

<body>
<p align="center"><font size="+2">HUB METHODS EVALUATIONS</font></p>

<table align="center"><tr><td align="right"><img src="exclamationmark.jpg" /><td>
<td align="left"><font size="+1">Not all evaluations are completed. You have 10 remaining.</font></td></tr></table>
<td>Select an evaluation form:</td>
<td><select name='eval_form' onchange='WhichForm(this.form)'><option>--- Select a form ---</option><option value='load'>Loader</option><option value='belt'>Belt Picker</option><option value='ic'>IC Loader</option></td>
</tr></table></p>

<!-- Loader section to hide/un-hide -->
<div id='load' style='display: none'><form action="insert.php?action=loader" method="post">
<table border="0">
<tr>
<td>some content</td>
</tr>
</table>
</form>
</div>
<!-- Loader section to hide/un-hide -->

<!-- Belt section to hide/un-hide -->
<div id='belt' style='display: none'><form action="insert.php?action=load_belt" method="post">
<table border="0">
<tr>
<td>some content again</td>
</tr>
</table>
</form>
</div>
<!-- Belt section to hide/un-hide -->

<!-- IC section to hide/un-hide -->
<div id='ic' style='display: none'><form action="insert.php?action=load_ic" method="post">
<table border="0">
<tr>
<td>some more content again</td>
</tr>
</table>
</form>
</div>
<!-- IC section to hide/un-hide -->

</body>
</html>

Posted: Sun Jan 28, 2007 2:05 am
by superdezign
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Well, you'll be happy to know that you were on the right track. However, firstly, you have to collapse all of the code together (which I was nice enough to do for you).

[syntax="javascript"]<script language="javascript" type="text/javascript">
function WhichForm(frm)
{
	if(!frm.eval_form.selectedIndex == 1)
		frm.eval_form.focus();
	if(frm.eval_form.selectedIndex == 1)
		document.getElementById("load").style.display = '';
	else
		document.getElementById("load").style.display = 'none';
	
	if(frm.eval_form.selectedIndex == 2)
	document.getElementById("belt").style.display = '';
	else
	document.getElementById("belt").style.display = 'none';
	
	if(frm.eval_form.selectedIndex == 3)
	document.getElementById("ic").style.display = '';
	else
	document.getElementById("ic").style.display = 'none';
}
</script>
Next, the error your coming across is simple. You are passing "this.form" into WhichForm(frm), but at no point do you create a form. Just add <form>...</form> around your dropdown box.

Also, the code is really messy. Your tags don't match up in your tables. Just... Here. I needed a break from my current project, so I wasted time and fixed that for you.

Code: Select all

<body>
<p align="center"><font size="+2">HUB METHODS EVALUATIONS</font></p>

<table align="center">
	<tr>
		<td align="right">
			<img src="exclamationmark.jpg" />
		<td>
		<td align="left">
			<font size="+1">Not all evaluations are completed. You have 10 remaining.</font>
		</td>
	</tr>
</table>
<table>
	<tr>
		<td>
			Select an evaluation form:
		</td>
		<td>
			<form>
			<select name='eval_form' onchange='WhichForm(this.form)'>
			<option>--- Select a form ---</option>
			<option value='load'>Loader</option>
			<option value='belt'>Belt Picker</option>
			<option value='ic'>IC Loader</option>
			</select>
			</form>
		</td>
	</tr>
</table>

<!-- Loader section to hide/un-hide -->
<div id='load' style='display: none'>
	<form action="insert.php?action=loader" method="post">
		<table border="0">
			<tr>
				<td>some content</td>
			</tr>
		</table>
	</form>
</div>
<!-- Loader section to hide/un-hide -->

<!-- Belt section to hide/un-hide -->
<div id='belt' style='display: none'><form action="insert.php?action=load_belt" method="post">
<table border="0">
<tr>
<td>some content again</td>
</tr>
</table>
</form>
</div>
<!-- Belt section to hide/un-hide -->

<!-- IC section to hide/un-hide -->
<div id='ic' style='display: none'><form action="insert.php?action=load_ic" method="post">
<table border="0">
<tr>
<td>some more content again</td>
</tr>
</table>
</form>
</div>
<!-- IC section to hide/un-hide -->
</body>
Don't say I never did anything for you. :-p


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Sun Jan 28, 2007 11:42 am
by tristanlee85
Works excellent! I wasn't sure too much about the Javascript part as I happened to find that code online somewhere and just kind of went with it. I didn't know if it could be all together in that one function or not.

The coding was a little weird because I removed 75% of the real stuff so it'd be easier to read so like you said, it was messy. Anyway, it works perfect. Thank you!

Posted: Sun Jan 28, 2007 12:27 pm
by superdezign
You're welcome. By the way, when it comes to having javascript problems, either output anything that you think isn't working to the screen, or use Firebug