Calling all Javascript Experts: HELP

J

jan12345

Active Member
Joined
Jun 6, 2011
Messages
91
Reaction score
0
Location
Eloff
Hello to all,

First of all, thank you for taking the time to look at my problem.

I am working on a web form that uses JavaScript to dynamically insert select boxes into the form, i managed to develop a simple script that was able to do achieve this.

Basically, i want to have a select box with options that "onClick" adds a select box with two options in the "test" div using the innerHTML function.

Take a look at the code:

Code: 
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Problem</title>
<script type="text/javascript">
	function addInput(){
		var myValue = document.forms['test']['select_options'].value;

		if(myValue == 1){
			document.getElementById('test').innerHTML += "Option 1:<select name='option_1'><option value='1'>Yes</option><option value='0'>No</option></select><br />";
		}
		if(myValue == 2){
			document.getElementById('test').innerHTML += "Option 2:<select name='option_2'><option value='1'>Yes</option><option value='0'>No</option></select><br />";
		}
		if(myValue == 3){
			document.getElementById('test').innerHTML += "Option 3:<select name='option_3'><option value='1'>Yes</option><option value='0'>No</option></select><br />";
		}
	}
</script>
</head>

<body>
<form name="test" action="test.php" method="post">
<div id="test"></div>
<select id="select_options">
	<option value="1" onclick="addInput()">Option 1</option>
    <option value="2" onclick="addInput()">Option 2</option>
    <option value="3" onclick="addInput()">Option 3</option>
</select>
<br /><br />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>

As you will see when you run this on Mozilla Firefox, it works perfectly :) , however, when i try to run it in IE or Chrome it does not want to work :mad: .

I suspect it has something to do with the innerHTML function and the way it interacts differently with different browsers :confused: .

I would appreciate any help you want to throw my way.
 
Last edited:
Code: 
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Problem</title>
<script type="text/javascript">
var Options = new Array("")
Options[1] = "Option 1:<select name='option_1'><option value='1'>Yes</option><option value='0'>No</option></select><br />";
Options[2] = "Option 2:<select name='option_2'><option value='1'>Yes</option><option value='0'>No</option></select><br />";
Options[3] = "Option 3:<select name='option_3'><option value='1'>Yes</option><option value='0'>No</option></select><br />";

	function addInput(v){
		document.getElementById('test').innerHTML += Options[v];
		}
</script>
</head>

<body>
<form name="test" action="test.php" method="post">
<div id="test"> </div>
<select id="select_options" onChange="addInput(this.value);">
	<option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<br /><br />
<input type="submit" name="submit" value="Submit" />
</form>
</body>

</html>

I moved the fx call to the <select event
I dropped the appended HTML into an array to eliminate that action being an issue
I then tested and it works...
 
Like this:

Code: 
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Problem</title>
<script type="text/javascript">
	function addInput(myValue){
		if(myValue == 1){
			document.getElementById('test').innerHTML += "Option 1:<select name='option_1'><option value='1'>Yes</option><option value='0'>No</option></select><br />";
		}
		if(myValue == 2){
			document.getElementById('test').innerHTML += "Option 2:<select name='option_2'><option value='1'>Yes</option><option value='0'>No</option></select><br />";
		}
		if(myValue == 3){
			document.getElementById('test').innerHTML += "Option 3:<select name='option_3'><option value='1'>Yes</option><option value='0'>No</option></select><br />";
		}
	}
</script>
</head>

<body>
<form name="test" action="test.php" method="post">
<div id="test"></div>
<select id="select_options" onchange="addInput(this.value);">
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
</select>
<br /><br />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>

EDIT: Haven't tested it yet, but it should work, will look at it at home if it doesn't.
 
Last edited:
Ho3n3r said:
Like this:
EDIT: Haven't tested it yet, but it should work, will look at it at home if it doesn't.
Click to expand...

This. And if performance isn't critical, consider using jquery. It separates js from markup and speeds up your dev time.
 
Wow, thank you guy's. i will definitely look at each of these solutions and get back to you.

Thanks a milion
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X