the user will have a button that says "Add Question" and then when the new input field appears there is a button that says "Add Choice". So I am trying to get the table in the form:
Question 1<input type =text name=question[ ]>
Choice <input type=text name=answers1[ ]>
Choice <input type=text name=answers1[ ]>
Question 2 <input type=text name = question[ ]>
Choice <input type=text name=answers2[ ]>
Choice <input type=text name=answers2[ ]>
and so on...
The problem is i don't know how to write the addChoice function so that the choice will come up below the corresponding question.
Whats going on right now, question 2 has the function call to addChoice ('tbl', '3') the three for ques number + 1 so it will go under it, but if i add a choice under ques 1,then try to add a choice under ques 2, instead of inserting under ques 2, it inserts above it because ques 2 row got pushed down. is there a way to get the current row index inside the function instead of passing it statically?
here is my code so far:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Page</title>
<script language="javascript">
row_no=1;
quesnum = 1;
function addRow(tbl){
var newnum = row_no+1;
var textbox='<input type="text" name="questions[]">';//for text box
var remove= '<a href="#" onclick="removeRow(\''+ tbl +'\',\'' + row_no + '\')"/>Remove It</a> <a href="#" onclick="addChoice(\''+ tbl +'\',\'' + newnum + '\')"/>Add</a>';
text="<div class='label' id='"+quesnum+"' align=right>Question "+quesnum+":</div>";
var tbl = document.getElementById(tbl);//to identify the table in which the row will get insert
try {
var newRow = tbl.insertRow(row_no);//creation of new row
var newCell = newRow.insertCell(0);//first cell in the row
newCell.innerHTML = text;//insertion of the 'text' variable in first cell
var newCell = newRow.insertCell(1);//second cell in the row
newCell.innerHTML = textbox + " " + remove;//insertion of the text box and the remove text using their variable
row_no++;
quesnum++;
} catch (ex) {
alert(ex); //if exception occurs
}
}
function removeRow(tbl,num)
{
var table = document.getElementById(tbl);
try {
row_no--;
table.deleteRow(num);//deletion of the clicked row
} catch (ex) {
alert(ex);
}
}
function addChoice(tbl,row){
var choicerow = row-1;
var textbox='<input type="text" name="answer'+quesnum+'[]">';//for text box
var remove= '<a href="#" onclick="removeRow(\''+ tbl +'\',\'' + row_no + '\')"/>Remove It</a> ';
text="<div class='label' align=right>Choice</div>";
var tbl = document.getElementById(tbl);//to identify the table in which the row will get insert
try {
var newRow = tbl.insertRow(row);//creation of new row
var newCell = newRow.insertCell(0);//first cell in the row
newCell.innerHTML = text;//insertion of the 'text' variable in first cell
var newCell = newRow.insertCell(1);//second cell in the row
newCell.innerHTML = textbox + " " + remove;//insertion of the text box and the remove text using their variable
row_no++;
} catch (ex) {
alert(ex); //if exception occurs
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="450" border="0" cellspacing="0" cellpadding="0" id="mytable">
<tr id="myrow">
<td colspan="2" align="center"><h3>Dynamically Handeled Table</h3>
</td>
</tr>
<tr ID="add">
<td width="177"> </td>
<td width="273" align="right"><input type="button" name="Button" value="Add Text Box" onClick="addRow('mytable','myrow')"></td>
</tr>
<tr ID="add">
<td width="177"> </td>
<td width="273" align="right"> </td>
</tr>
</table>
</form>
</body>
</html>
