java

midntcowboy25

Baseband Member
Messages
21
Im making a small search engine. I have two drop-down menus one is Discipline the other sub-discipline. If I want to make the Sub-discipline values depend on the Disciplines values how do i do it?
 
Code:
<script>
function change_form()
{
	var el = document.getElementById? document.getElementById('formxyz'): 	document.all['formxyz'];
	var formx1 = "<select name=\"subselect\"><option value=\"1\" name=\"1\">1a</option><option value=\"1\" name=\"1\">2a</option><option value=\"1\" name=\"1\">3a</option><option value=\"1\" name=\"1\">4a</option></select>";
	var formx2 = "<select name=\"subselect\"><option value=\"1\" name=\"1\">1b</option><option value=\"1\" name=\"1\">2b</option><option value=\"1\" name=\"1\">3b</option><option value=\"1\" name=\"1\">4b</option></select>";
	if (document.form1.dropdn1.value=="val1") 
	{ 
	  if (el && typeof el.innerHTML != "undefined") el.innerHTML = formx1;
	}
	if (document.form1.dropdn1.value=="val2") 
 	{ 
	  if (el && typeof el.innerHTML != "undefined") el.innerHTML = formx2;
	}
}

</script>
<html>
<body>
<form name="form1">
<table border=1>
  <tr>
    <td>
      <select name="dropdn1" OnChange="change_form();">
<option name="val1" value="val1">val1</option>
<option name="val2" value="val2">val2</option>
</select>
    </td>
    <td>
      <div id="formxyz">
	 <select name="subselect">
	  <option value="1" name="1">1a</option>
	  <option value="1" name="1">2a</option>
	  <option value="1" name="1">3a</option>
	  <option value="1" name="1">4a</option>
	 </select>
      </div>
    </td>
  </tr>
</table>
</form>
</body>
</html>
 
Hey root, somethings wrong

I used you script but I get a runtime error on this line, it says "document.form1.dropdn1" is null or not an object.

var formx2 = "<select name=\"subselect\"><option value=\"1\" name=\"1\">1b</option><option value=\"1\" name=\"1\">2b</option><option value=\"1\" name=\"1\">3b</option><option value=\"1\" name=\"1\">4b</option></select>";
 
hmm... it doesn't lie...

try changing
<option name="val1" value="val1">val1</option>
to
<option name="val1" value="val1" SELECTED>val1</option>

then when the form loads document.form1.dropdn1 won't be null
 
seriously, I'd avise that you look for a nicer menu than a select box, as it's a form control is worked nicely for midntcowboy25's search and subsearch idea...
you'd do better searching somewhere like Javaboutique.internet.com for better menus...

however if you really want to have menus that are select boxes then here you are.

Code:
<script>
function navigate()
{
var menval=document.frm.menu.value;
document.location = (menval);
}
</script>

<body>
<form name="frm">
<select name="menu" Onchange="navigate();">
<option name="1" value="page1.html">1</option>
<option name="2" value="page2.html">2</option>
<option name="3" value="page3.html">3</option>
</select>
</form>
</body>
 
I am still getting that same error when I select either value.
I have it pasted as you posted it, I am going to end up changing the values eventually but I want to get this working as a default for me first.

The error is taking place on the:

if (document.form1.dropdn1.value="val1"

and the same line for "val2"

Were there any lines I was supposed to change that are common sense and I just didnt know to change, or should this default work as it is.
 
Can't quite understand why it doesn't work, it seems to work for me, (XPSP1 IE6 SP1).
the only thing I can think is that the browser you are using is processing the script when the page loads, and hence before the form is drawn, (which it shouldn't do because the function is not Page_load)
(when you change the option to be selected by default, the object is not null, so the error has to be not an object.
Code:
<script>
function change_form()
{
	var el = document.getElementById? document.getElementById('formxyz'): 	document.all['formxyz'];
	var formx1 = "<select name=\"subselect\"><option value=\"1\" name=\"1\">1a</option><option value=\"1\" name=\"1\">2a</option><option value=\"1\" name=\"1\">3a</option><option value=\"1\" name=\"1\">4a</option></select>";
	var formx2 = "<select name=\"subselect\"><option value=\"1\" name=\"1\">1b</option><option value=\"1\" name=\"1\">2b</option><option value=\"1\" name=\"1\">3b</option><option value=\"1\" name=\"1\">4b</option></select>";
	if (document.form1.dropdn1.value=="val1") 
	{ 
	  if (el && typeof el.innerHTML != "undefined") el.innerHTML = formx1;
	}
	if (document.form1.dropdn1.value=="val2") 
 	{ 
	  if (el && typeof el.innerHTML != "undefined") el.innerHTML = formx2;
	}
}

</script>
<html>
<body>
<form name="form1">
<table border=1>
  <tr>
    <td>
      <select name="dropdn1" OnChange="change_form();">
<option name="val1" value="val1" SELECTED>val1</option>
<option name="val2" value="val2">val2</option>
</select>
    </td>
    <td>
      <div id="formxyz">
	 <select name="subselect">
	  <option value="1" name="1">1a</option>
	  <option value="1" name="1">2a</option>
	  <option value="1" name="1">3a</option>
	  <option value="1" name="1">4a</option>
	 </select>
      </div>
    </td>
  </tr>
</table>
</form>
</body>
</html>
If the code doesn't work, try putting the script section after the HTML so that the form will definitly be loaded before the script is parsed.

(out of interest, what browser are you using?)
 
Back
Top Bottom