SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:
    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:
    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. #2
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    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 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:

    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. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Quote Originally Posted by carlbrooks View Post
    Well what do you want me to do, it would not let me modify or delete the thread and I wanted to provide an easier question for users so they understand it.
    test from op's other thread


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •