I'm really new in web developing.
I'm trying to create multiple inputboxes when user selects any option from drop down box (so that it would be dynamic)
However, when I click, i only receive pop up message for test purpose but I don't see any input boxes. Also when I check my source page, my HTML page has error where i put <div> (this is where my input boxes should be display). Error message that I'm getting is start tag "div" seen in "table" error ... I'm assuming that program is unable to display input box due to this error. I tried to look for answer in Google, but i still can't fix this problem...
Please let me know how I can fix this error....
Any help will be appreciated...Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src=".7.1/jquery.min.js"></script>
<title>Run test Script</title>
<script type="text/javascript">
function createInputs() {
alert('writing inputs'); //Test....this message shows...when i change
var value = document.getElementById("test").value; // this gives you the selected value.
var split = value.split;
var splitsize = split.length;
var code = '';
for (var j=0; j<splitsize; j++){
var a = "<input type = 'text' name = '" + split[j] + "' id = '" + split[j] + "'>";
code += a;
}
document.getElementById("inputBox").innerHTML = code;
}
</script>
<body>
<form action="./runtest?host=11.111.11.11&envname=XP" method="post" name="testForm">
<table border="0">
<tr style="font-weight: bold; font-size: 16px;">
<td>Environment Name: </td>
<td>XP</td>
</tr>
<tr>
<td>Select user name :</td>
<td><select id="userName" name="userName">
<option value="user">user</option>
<option value="guest">guest</option>
</select>
</td>
</tr>
<tr>
<td>Enter Password :</td>
<td>
<input id="pass" type="password" name="password">
</tr>
<tr>
<td>Select test : </td>
<td><select id="testname" name="testname" onchange="createInputs()">
<option value="" name=""></option>
<option value="size" name="startup">startup</option>
<option value="size" name="Performance">Performance</option>
<option value="" name="reboot">reboot</option>
<option value="size,time" name="fetch event">fetch event</option>
</select></td>
</tr>
<tr>
<td></td>
<div id = "inputBox"></div> //*************Error message here ***********
</tr>
<tr>
<td> Enter test User: </td>
<td><input type="text" id="tuser"></td>
</tr>
<tr>
<td> Enter Test Date: </td>
<td><input type="text" id="tdate"></td>
</tr>
</table>
<br>
<input type="submit" value="Run" name="Run">
<input type="button" value="Close" onclick="window.close()">
</form>
</body>
</html>
I'm really new in web developing.
I'm trying to create multiple inputboxes when user selects any option from drop down box (so that it would be dynamic)
However, when I click, i only receive pop up message for test purpose but I don't see any input boxes. Also when I check my source page, my HTML page has error where i put <div> (this is where my input boxes should be display). Error message that I'm getting is start tag "div" seen in "table" error ... I'm assuming that program is unable to display input box due to this error. I tried to look for answer in Google, but i still can't fix this problem...
Please let me know how I can fix this error....
Any help will be appreciated...Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>Run test Script</title>
<script type="text/javascript">
function createInputs() {
alert('writing inputs'); //Test....this message shows...when i change
var value = document.getElementById("test").value; // this gives you the selected value.
var split = value.split;
var splitsize = split.length;
var code = '';
for (var j=0; j<splitsize; j++){
var a = "<input type = 'text' name = '" + split[j] + "' id = '" + split[j] + "'>";
code += a;
}
document.getElementById("inputBox").innerHTML = code;
}
</script>
<body>
<form action="./runtest?host=11.111.11.11&envname=XP" method="post" name="testForm">
<table border="0">
<tr style="font-weight: bold; font-size: 16px;">
<td>Environment Name: </td>
<td>XP</td>
</tr>
<tr>
<td>Select user name :</td>
<td><select id="userName" name="userName">
<option value="user">user</option>
<option value="guest">guest</option>
</select>
</td>
</tr>
<tr>
<td>Enter Password :</td>
<td>
<input id="pass" type="password" name="password">
</tr>
<tr>
<td>Select test : </td>
<td><select id="testname" name="testname" onchange="createInputs()">
<option value="" name=""></option>
<option value="size" name="startup">startup</option>
<option value="size" name="Performance">Performance</option>
<option value="" name="reboot">reboot</option>
<option value="size,time" name="fetch event">fetch event</option>
</select></td>
</tr>
<tr>
<td></td>
<div id = "inputBox"></div> //*************Error message here ***********
</tr>
<tr>
<td> Enter test User: </td>
<td><input type="text" id="tuser"></td>
</tr>
<tr>
<td> Enter Test Date: </td>
<td><input type="text" id="tdate"></td>
</tr>
</table>
<br>
<input type="submit" value="Run" name="Run">
<input type="button" value="Close" onclick="window.close()">
</form>
</body>
</html>
- 1 jsbin: jsbin./ebiwag/1/edit – Jim Blackler Commented Nov 27, 2012 at 14:54
- I never knew there is tool like this thanks! – user1516649 Commented Nov 27, 2012 at 15:02
4 Answers
Reset to default 2The quickest way to solve this problem is to open Google Chrome and view the developer tools and the console when executing this code.
Problem 1: document.getElementById("pname") is null and needs to be changed to document.getElementById("testname").
var value = document.getElementById("testname").value;
Problem 2: split is a method and needs to be passed a separator. So, instead of value.split, it needs to be value.split(",")
var split = value.split(",");
Take note that your reboot option might not work well since your value is empty.
EDIT: as others have noted, you should also validate your HTML at http://validator.w3/#validate_by_input
<tr>
<td></td>
<td>
<div id = "inputBox"></div> //*************Error message here ***********
</td>
</tr>
You need to add your div in a <td></td> tag.
Your script executes
document.getElementById("pname")
.. but I can't see an element with id pname. I see one with testname.
So the problem is you cannot nest a div element directly inside a tr element. In fact, I am pretty sure the only elements your can "officially" use as direct children of a tr element are <th> and <td>
Try wrapping the div element with a td element instead...
<tr>
<td></td>
<td>
<div id = "inputBox"></div>
</td>
</tr>
If you are trying to dynamically create this input element, then you may have issues with your javascript. Are you getting any console output errors?
Also, if you want to capture user input, then use the tag...
<tr>
<td></td>
<td>
<input id="inputBox" type="text" />
</td>
</tr>