I want to submit a question from textarea and insert it into a table

JavaScript
1

Hi,

This is what I want to know. 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:

Lets say there are a number of rows in a table. 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 in the first row of the table under the “Question” column, the textarea goes blank and the user enters in his second question, if the user submits this then the question would appear in the second row, 3rd question into 3rd row, 4th question 4th into row etc.

Problem is that I do not know how to do this. I have attempted trying to do it but when I try and submit my first question the first row of the table under the “Question” column outputs “[object HTMLTableCellElement]”. Why does this happen and can somebody please be able to show me how to achieve what I want to achieve.

Thank You very much and any help will be greatly appreciated

Below is my javascript code:


              <script type="text/javascript">
              
              
    function insertQuestion() {     
    			var questionDiv = document.getElementById("question");
    			var getQuestion = document.getElementById("questionTextarea");     
    			
    			var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
                
                var questionCell = questionDiv.row.insertCell(getQuestion);
    			      
    			questionCell.innerHTML = getQuestion; 
    			}
              
              </script>

Below is html code:


    //table where questions would be stored
    
        <table id="qandatbl" align="center">
        <thead>
        <tr>
        <th><span id="qidhead">Question No</span></th>
        <th><span id="questionhead">Question</span></th>
        </tr>
        </thead>
        <tbody>
        <?php
        $spinnerCount = $_POST['textQuestion'];
    if($spinnerCount > 0) {
       for($i = 1; $i <= $spinnerCount; $i++) {?>
       
    	<tr>
        <td id="qid"><?php echo $i; ?></td>
        <td id="question"></td>
    	</tr>
    	</tbody>
    	<?php
    }
    }
    ?>
    </table>

    //table which consists of textarea and submit button
    
    <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>
2

Hi,

I have almost done it but I have two questions I am stuck on.

Question 1: Every time I submit a question, instead of inserting the question in the row of the table, it is adding a new row in the table add is displaying it there. So if I had 20 questions set from the spinner, but then added 20 questions from submission from text area, then there will be 40 rows in the table, 20 of them blank and 20 of them with questions and the Question No column would go from number 1 to number 40. So what I want to know is how can insert a question from a text area into the table for each row starting from 1 and going down up to the last Question No ?

Question 2: How can I stop displaying the textarea and button after the last question (last row) has been filled with a question?

Below is my code:

Javascript:


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 optionCell = document.createElement("td");
optionCell.className = "options";
row.appendChild(optionCell);

var durationCell = document.createElement("td");
durationCell.className = "duration";
row.appendChild(durationCell);

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

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

var videoCell = document.createElement("td");
videoCell.className = "video";
row.appendChild(videoCell);

var audioCell = document.createElement("td");
audioCell.className = "audio";
row.appendChild(audioCell);

var imageCell = document.createElement("td");
imageCell.className = "image";
row.appendChild(imageCell);

var rowCount = tableBody.rows.length;
var enumeratorContent = document.createTextNode(rowCount);
enumeratorCell.appendChild(enumeratorContent);
var questionText = textarea.value;
var questionContent = document.createTextNode(questionText);
questionCell.appendChild(questionContent);

			}
          
          </script>
     </head>

HTML code:


<table id="qandatbl" align="center">
    <thead>
        <tr>
            <th id="qidhead">Question No</th>
            <th id="questionhead">Question</th>
        </tr>
    </thead>
    <tbody>
<?php
    $spinnerCount = $_POST['textQuestion'];
    if ($spinnerCount > 0) {
       for($i = 1; $i <= $spinnerCount; $i++) {
?>
         <tr>
            <td class="qid"><?php echo $i; ?></td>
            <td class="question"></td>
         </tr>
<?php
        }
    }
?>
    </tbody>
</table>
<!-- table which consists of textarea and submit button -->
<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="questionTextareaCell"><textarea id="questionTxt" rows="5" cols="40" 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>
3
Off Topic:

test from op’s other thread