Table creates new rows when 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.

 

I have attached a document with this question which will show you how I want it to be displayed and what is displays currently and would hopefully explain it better for you if you are a bit confused.

 

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>

 

[attachment deleted by admin]

[nogray]

When the user submit a question, you would need to loop through the current rows in your table and check the innerHTML for the questions td. If it's empty, populate it with the content. If all the rows are filled, add a new row.