If statement in javascript forms
Im fairly new to javascript but have some experience in HTML. I am trying to create a form which allows me to select an option from the drop down menu, which further expands the form (showing new fields on the same page) depending on the option selected from the drop down menu. I figured I need some sort of if statement to achieve this but I can't seem to figure out the right way to do so. I already have the drop down menu working. I would put the code I already have on here, but for some reason its not letting me Thanks for your help
EDIT - Ran the code from comments through HTML tidy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="gene开发者_JS百科rator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<title>Ipod Inventory</title>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
function submitSelect(form) { alert (form.reason.selectedIndex); document.body.innerHTML() = "<h3>NEW STUFF<h3>"; }
//]]>
</script>
</head>
<body>
<h3>General</h3>Employee Requesting:
<form>
<input type="text" name="employee" value="" />
</form>
<form name="myform" action="" method="get" id="myform">
Reason: <select name="reason">
<option>
Conference/Meeting
</option>
<option>
Loaner
</option>
</select> <input type="button" name="submit" value="Submit" onclick=
"submitSelect(this.form)" /><br />
</form>
</body>
</html>
What you could do is split your page in different div sections, one for each case in your dropdown. You would then alter the display property of those divs using
element.style.display = 'none'
or
element.style.display = 'block'
If your setup is more complex, you might want to create a list of fields that should be visible for each item in your combo box, and then show/hide using the same technique.
For example, you would have a dropdown with male, and female. You would then have to div elements, whose id would be male or female. Then you would use
function toggle() {
if (document.getElementById('selector').value == 'male') {
document.getElementById('male').style.display = 'block';
document.getElementById('female').style.display = 'none';
}
else {
document.getElementById('male').style.display = 'none';
document.getElementById('female').style.display = 'block';
}
}
var selectmenu=document.getElementById("mymenu")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
if (chosenoption.value!="nothing"){
window.open(chosenoption.value, "", "") //open target site (based on option's value attr) in new window
}
}
Thats the if condition you need to use and the example also shows how to bind change event too..(code snippet extracted from javascript kit)
What you want to do is start with the onchange event of your reason select box:
<select name="reason" id="reason" onchange="myFunc();">
myFunc() (excuse the name, I'm not very creative) will be where you do your showing/hiding of the other inputs - probably not a different form, as usually inputs are collected into a single form on a page. Each input (or set of inputs) should be in it's own <div> tag, and you can then use the element.style.display property of the tag to show/hide the inputs, as described in the other answers. For example, you might have the following in your form:
<form name="myform" action="" method="get" id="myform">
Reason: <select name="reason" id="reason" onchange="myFunc()">
<option>
Conference/Meeting
</option>
<option>
Loaner
</option>
</select>
<div id="conferenceInputs">
Conference:
<select name="conferenceSelectBox" id="conferenceSelectBox">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div id="loanerInputs">
Loaner:
<select name="loanerSelectBox" id="loanerSelectBox">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<input type="button" name="submit" value="Submit" onclick="submitSelect(this.form)" />
</form>
The myFunc() javascript would look something like this:
function myFunc() {
var selectElem = document.getElementById('reason');
var optionText = selectElem.options[selectElem.selectedIndex].text;
switch(optionText) {
case "Conference/Meeting":
document.getElementById('conferenceInputs').style.display = 'block';
document.getElementById('loanerInputs').style.display = 'none';
break;
case "Loaner":
document.getElementById('loanerInputs').style.display = 'block';
document.getElementById('conferenceInputs').style.display = 'none';
break;
default:
}
}
Finally, you would want to have a javascript function that loads with the HTML page - <body onload="anotherFunc()"> that sets both div's style.display properties to 'none' so that they don't appear before the user selects anything.
加载中,请稍侯......
精彩评论