In this code, is it do-able to make a form that is a select and if one option is selected, then 2 more forms are displayed?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
#submit {
display: block;
}
</style>
<script type="text/javascript">
function clone_and_remove (the_node) {
var parent = the_node.parentNode;
var the_clone = the_node.cloneNode(true);
parent.removeChild(the_node);
return the_clone;
}
function insert_node (the_node, index_node) {
var parent = index_node.parentNode;
var result = parent.insertBefore(the_node, index_node);
return result;
}
my_clone = null;
function init () {
my_clone = clone_and_remove (document.getElementById("browser_field"));
document.getElementById("browser").onchange = function () {
var the_node;
if (this.checked == true) {
the_node = insert_node (my_clone, document.getElementById("submit"));
} else {
my_clone = clone_and_remove (document.getElementById("browser_field"));
}
}
}
window.onload = init;
</script>
</head>
<body>
<form method="get" action="" id="my_form">
<div>
<label>Check here if you use a web browser: </label>
<input type="checkbox" id="browser">
<div id="browser_field">
<label>Please specify your browser: </label>
<select id="browser_type" name="b_type">
<option>None</option>
<option value="Explorer">Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Safari">Safari</option>
<option value="Opera">Opera</option>
<option value="Other">Other</option>
</select>
</div>
<input type="submit" value="Submit" id="submit">
</div>
</form>
</body>
</html>
Comment