table creates new row every time a question is submitted

[carlbrooks]

I have a table which has the number of rows depended on what the number is in the spinner. This does work e.g If I enter 25 in spinner it comes up with 25 rows, if I enter 7 in spinner comes with 7 rows.

So my problem is this:

What I have is a textarea where the user enters in their question and then submits the question, the question should be inserted and appear under the "Question" column.

The problem is that everytime I submit a question into the table, it creates a new row. So if I had 20 empty rows in the table because I stated in the spinner I wanted 20 questions, then what happens is everytime I submit a question, it adds a new row every time, I want the question to be inserted in a current row starting from 1st row add going down 1 row every time a question is submitted.


Below is my javascript code:

function insertQuestion() {
var table = document.getElementById("qandatbl");
var tableBody = table.tBodies[0];
var textarea = document.getElementById("questionTxt");

var row = document.createElement("tr");
tableBody.appendChild(row);

var enumeratorCell = document.createElement("td");
enumeratorCell.className = "qid";
row.appendChild(enumeratorCell);

var questionCell = document.createElement("td");
questionCell.className = "question";
row.appendChild(questionCell);

var weightCell = document.createElement("td");
weightCell.className = "weight";
row.appendChild(weightCell);

var answerCell = document.createElement("td");
answerCell.className = "answer";
row.appendChild(answerCell);

var questionText = textarea.value;
var questionContent = document.createTextNode(questionText);
questionCell.appendChild(questionContent);

}

Html code of table and text area with submit button:


// table where questions will be inserted into

<table>

<?php
$spinnerCount = $_POST['textQuestion'];
if($spinnerCount > 0) {
for($i = 1; $i <= $spinnerCount; $i++) {?> // this get the number of questions from the spinner

<tr>
<td class="qid"><?php echo $i; ?></td>
<td class="question"></td>
<td class="weight"></td>
<td class="answer"></td>
</tr>

</table>



//Text Area and submit button to submit questions

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<table id='middleDetails' border='1'>
<tr>
<th class='tblheading' colspan='2'>SESSION DETAILS</th>
</tr>
<tr>
<td id="questionNum">Question No </td>
</tr>
<tr>
<td id="questionContent">Question:</td>
<td id="questionTextarea"><textarea rows="5" cols="40" id="questionTxt" name="questionText"></textarea></td>
</tr>
<tr>
<td id="addQuestionRow" colspan='2'><input id="addQuestion" type="button" value="Add Question" name="addQuestionBtn" onClick="insertQuestion()" /></td>
</tr>
</table>
</form>

[RaptorRex]

It looks like you are explicitly adding a row:

var row = document.createElement("tr");
tableBody.appendChild(row);
You need to find the row into which you want to insert and changes its cell's contents.

[weegillis]

This might not be any help since it's a different approach... How about setting a limit of 25 rows on your table, but don't ask how many rows, just let the user input questions until they either chose to Exit Input Stage, or until the maximum is reached? That way you can add the rows one at a time, as questions are submitted and never have any empty rows. Just a thought.