hi there
if you look at the output of my first code or "instance". once a option is selected in the checkbox, the cell next to that cell changes and presents a form to the user, or input field based on the selected option... so in essence this is ONE instance of a Question..
the problem is that i want to ADD another question below that, I can add another row with a dropdownbox, BUT i do not know how to go further and let it act onchange and generate form like above mentioned...please help
<!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>Untitled Document</title>
<script>
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode("Question " + iteration);
cellLeft.appendChild(textNode);
// middle cell
var cellMiddle = row.insertCell(1);
var oSelect=document.createElement("select");
oSelect.setAttribute('name','numflowers' + iteration);
oSelect.setAttribute('id', 'numflowers' + iteration);
var oOption4 = document.createElement("OPTION");
var t = document.createTextNode("");
oOption4.setAttribute("value", "4");
oOption4.setAttribute("id", "divColor4");
oOption4.appendChild(t);
oSelect.appendChild(oOption4);
var oOption = document.createElement("OPTION");
var t = document.createTextNode("Short Question");
oOption.setAttribute("value", "1");
oOption.setAttribute("id", "divColor1");
oOption.appendChild(t);
oSelect.appendChild(oOption);
var oOption1 = document.createElement("OPTION");
var t = document.createTextNode("Long Question");
oOption1.setAttribute("value", "2");
oOption1.setAttribute("id", "divColor2");
oOption1.appendChild(t);
oSelect.appendChild(oOption1);
var oOption2 = document.createElement("OPTION");
var t = document.createTextNode("Multiple Question");
oOption2.setAttribute("value", "3");
oOption2.setAttribute("id", "divColor3");
oOption2.appendChild(t);
oSelect.appendChild(oOption2);
var oOption3 = document.createElement("OPTION");
var t = document.createTextNode("True / False");
oOption3.setAttribute("value", "TF");
oOption3.setAttribute("id", "divColor1");
oOption3.appendChild(t);
oSelect.appendChild(oOption3);
cellMiddle.appendChild(oSelect);
//cell Right
var cellRight = row.insertCell(2);
var textNode1 = document.createTextNode();
cellRight.appendChild(textNode1);
}
function keyPressTest(e, obj)
{
var validateChkb = document.getElementById('chkValidateOnKeyPress');
if (validateChkb.checked) {
var displayObj = document.getElementById('spanOutput');
var key;
if(window.event) {
key = window.event.keyCode;
}
else if(e.which) {
key = e.which;
}
var objId;
if (obj != null) {
objId = obj.id;
} else {
objId = this.id;
}
displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
}
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function ShowMenu(num, menu, max)
{
//num is selected value, menu is the name of the div, max is the number of divs
for(i = 1; i <= max; i++){
//add number onto end of menu
var menu_div = menu + i;
//if current show
if(i == num) {
document.getElementById(menu_div).style.display = 'block';
} else {
//if not, hide
document.getElementById(menu_div).style.display = 'none';
}
}
}
</script>
</head>
<body>
<h3>Create Test Form</h3>
<form action="tableaddrow_nw.html" method="get">
<p style="border: 5px solid #000; width: 500px; height:100px; padding: 3px;">
<span id="spanOutput">sss </span>
</p>
<table border="1" id="tblSample" width="900px">
<tr>
<th colspan="3">Sample table</th>
</tr>
<tr>
<td width="70px">Question 1</td><td width="100px">
<form action="processorder.php" method="post">
<select id='numflowers'
onChange="javascript: ShowMenu(document.getElementById('numflowers').value,'divColor', 4);">
<option value='0'>Choose Type of Question
<option value='1'>Short Question
<option value='2'>Long Question
<option value='3'>Mutiple Choice
<option value='4'>True / False
</select>
</td><td width="730px">
<div id='divColor1' style="display: none; background-color:#06C; padding:5px; " >
<p>Question: <input type="text" name="color1" value=""/></p>
<p>
Possible Answers:
<input type="text" name="color1" value=""/>
<input type="text" name="color1" value=""/>
<input type="text" name="color1" value=""/>
</p>
</div>
<div id='divColor2' style="display: none;">
<p>Question: <textarea name="color2" value="" cols="70" rows="10"></textarea>
</p>
</div>
<div id='divColor3' style="display: none;">
Mutiple Choice:<br><br>
<input type="radio" name="color3" value="">Red<br>
<input type="radio" name="color3" value="">White<br>
<input type="radio" name="color3" value="">Yellow<br>
</div>
<div id='divColor4' style="display: none;">
Choose type of flower 4:<br><br>
<input type="radio" name="color4" value="red">Red<br>
<input type="radio" name="color4" value="white">White<br>
<input type="radio" name="color4" value="yellow">Yellow<br>
</div>
<br>
</form></td></tr>
</table>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
</form>
</body>
</html>
