Passing HTML form value to Javascript

JavaScript
1

Morning…

My goal: To swap the visibility of two divs via the user defined form value. Thus getting ‘Iowa’ or whatever school via the form value, not manual declaration.

What I have done successfully so far: ‘Manually’ pass a variable (Iowa) to Javascript, but not automatically via the value of the form. With the manual method, the divs toggle. ‘Iowa’ shows up, ‘Options’ goes away.

I’ve tried: Things like ‘var college = document.searchfield.value’ - to no avail…

What I’m using: CSS Globe’s ‘Searchfield’ - autocomplete search form. Also a previously successful Javascript function to manually switch div visibility.

My Javascript Code: (as it is currently working manually)

<script language=“javascript”>
[INDENT]var shown = ‘options’;
function show(college) {
document.getElementById(shown).style.display=‘none’;
document.getElementById(college).style.display=‘block’;
shown = college;
}[/INDENT]
</script>

My HTML Code: (again - manually passing variable)

<div id=“search”>
[INDENT]<form id=“searchform” action=“javascript:show(‘Iowa’)”
method=“get” name=“searchform”>
<input type=“text” id=“searchfield” name=“searchfield” value=“” />
<input type=“submit” id=“searchbutton” value=“” />
</form>[/INDENT]
</div>

2

To get the form value, you first need to get the form.


var form = document.getElementById('searchform');
var college = form.elements.searchfield.value;
3

Thank you very much! I wouldn’t have figured that out…probably because I’m new to this…regardless:

Final code solution (adding what I was instructed to add):

<script language="javascript">
	var shown = 'options';
	function show(college) {
		var form = document.getElementById('searchform');
		var college = form.elements.searchfield.value;
		document.getElementById(shown).style.display='none';
		document.getElementById(college).style.display='block';
		shown = college;
	}
</script>

…and changing the html form to this (just removing the manual declaration):

<div id="search">
    		<form id="searchform" action="javascript:show()" method="get" name="searchform">
			<input type="text" id="searchfield" name="searchfield" value="" />
			<input type="submit" id="searchbutton" value="" />
			</form>
    </div>

Goal Achieved: Now the user can fill out the autocomplete search field (with currently 66 options), and it will toggle their user defined DIV based on their selection.

Thanks again!