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

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 791 Views - Last Post: 29 November 2011 - 11:55 AM

#1 carlbrooks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 19-November 11

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

Posted 27 November 2011 - 07:23 PM

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>


Is This A Good Question/Topic? 0
  • +

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

#2 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

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

Posted 27 November 2011 - 07:33 PM

Why not recreate the table through DOM manipulation every time you want to add a new question?
Then get the question needed then put it in the corresponding row. Now, to save the table I guess just save the questions inside an array to help with the building of the array. Question though, is there a limit to how many rows of questions you would create?
Was This Post Helpful? 0
  • +
  • -

#3 carlbrooks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 19-November 11

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

Posted 27 November 2011 - 07:50 PM

I am very sorry but I am not much of a javascript programmer, I am more of an oracle and database programmer, I don't really know what to do or how to code what you have told me to do. Can you show me an example of this
Was This Post Helpful? 0
  • +
  • -

#4 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

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

Posted 27 November 2011 - 08:04 PM

Sure, no problem. Just to be sure, can I verify how many rows you need for the table. One more thing, does the table appear already on startup?

Here's how I visualize your program:

Textarea here, also a button for submit.

Table with empty rows.

Now if I add a question up it would fill the nearest available row right?

No questions ,add 1 question , the question appears at the 1st row of the table
1 question, add another question, the question appears at the 2nd row of the table
so on and so forth until the table is filled.

Is this correct?
Was This Post Helpful? 0
  • +
  • -

#5 carlbrooks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 19-November 11

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

Posted 27 November 2011 - 08:16 PM

Hi, yes you are correct. All questions go under "Question" Column If you have an empty table, if you add a question it goes to row 1, add another question it goes to row 2 and etc, like you stated.

You don't need to verify number of row because it does this automatically which I got working by using the php variable $spinnerCount, this variable gets the number from a spinner which is on another page and uses that number to determine the number of rows.

one more thing I realized in my code:

Can you use this javascript code below rather than the javascript code I posted in the first post because I have some undefined code in the other javascript code.
          <script type="text/javascript">
          
          
function insertQuestion() {   
			var qandatable =  document.getElementById("qandatbl"); 
			var questionDiv = document.getElementById("question");
			var getQuestion = document.getElementById("questionTextarea");     
			
			var rowCount = qandatable.rows.length;
            var row = qandatable.insertRow(rowCount);
            
            var questionCell = row.insertCell(getQuestion);
			      
			questionCell.innerHTML = getQuestion.value; 
			}
          
          </script>


Thank you for helping me :)
Was This Post Helpful? 0
  • +
  • -

#6 carlbrooks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 19-November 11

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

Posted 27 November 2011 - 10:38 PM

Hi,

What I am doing is inputting a question in a textarea and when I submit it the question would be displayed in the table under the "Question" column. Now what happens is that the table is already set the number of questions from a spinner in another page and what that does is output the same number of rows in the table under the "Question No" column and it will display the question number for each row.

e.g. if the spinner contains the number 20, then the table would output 20 rows and in the "Question No" column each row goes 1, 2, 3, 4, 5 ... all the way to 20.

The table retrieves the number of rows from the sinner using the php variable $spinnerCount.

Now f I have a blank table then what it suppose to do is when the first question is written in the text area and submitted, it will go on the first row for Question No 1, when the second question is written in the textarea and submitted it will go in the second row for Question No 2 and so on until it goes to the final question.

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>


Was This Post Helpful? 0
  • +
  • -

#7 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

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

Posted 27 November 2011 - 11:55 PM

Hey there. I've made a very crude thing on what you wanted to achieve, though you need to plugin the PHP code of yours.


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Index</title>
		<meta name="description" content="" />
		<meta name="author" content="pu23" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		<link rel="stylesheet" type="text/css" href="css/first.css"/>
		<script type="text/javascript">
			window.onload = function() {
				var rowNum = 20;
				createTable(rowNum + 1);
			}
			function createTable(rowNum) {
				var questionTable = document.createElement("table");
				questionTable.setAttribute("id", "questionTable");
				questionTable.setAttribute("border", "solid:1px solid black");
				var questionTableBody = document.createElement("tBody");
				tRow = document.createElement("tr");
				tData = document.createElement("td")
				headerText = document.createTextNode("QUESTIONS!");
				tData.appendChild(headerText);
				tData.setAttribute("id", "td" + y);
				tRow.appendChild(tData);
				questionTableBody.appendChild(tRow);
				for(var y = 0; y < rowNum - 1; y++) {
					tRow = document.createElement("tr");
					tData = document.createElement("td")
					tData.setAttribute("id", "td" + y);
					tRow.appendChild(tData);
					questionTableBody.appendChild(tRow);
				}
				var headers = document.getElementsByTagName("header")[0];
				questionTable.appendChild(questionTableBody);
				headers.appendChild(questionTable);
			}
			function addQuestion(){
				for(var i = 0; i < 20; i++){
					curRow = document.getElementById("td" + i);
					if(curRow.innerHTML == '' || curRow.innerHTML == null){
						var qText = document.createTextNode(document.getElementById("questionField").value);
						curRow.appendChild(qText);
						break;
					}
				}
			}
		</script>
	</head>
	<body>
		<div>
			<header>
				<h1>Index</h1>
			</header>
			<input type="text" id="questionField"/>
			<input type="button" value="SUBMIT QUESTION!" onclick="addQuestion();" />
			<footer>
				<p>
					&copy; Copyright  by A - Me, A - Mario!
				</p>
			</footer>
		</div>
	</body>
</html>




Test this first. Save on an alternate html. Also, I edited the style for td.
td{
	height: 20px;
	width: 300px;
	text-align: center;
}



What I did is this:

1. On load of the page, I create a table with the row number specification.
2. Now that it's created, I made a function that checks if the rows don't have anything inside them. If they don't, put in the question in the textfield after clicking a button.

I suggest you read through these topics:

- DOM manipulation
- Javascript programming in general

It isn't very hard to achieve what you want, especially with all the resources Google has to offer. Hope you read up on those topics. If you have any other questions, just ask so.

By the way, ignore everything cryptic on the head part, those are Aptana generated.
Was This Post Helpful? 2
  • +
  • -

#8 carlbrooks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 19-November 11

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

Posted 28 November 2011 - 04:18 AM

Thank you so much I can use this to expand it for my other columns. Thank you :)
Was This Post Helpful? 0
  • +
  • -

#9 carlbrooks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 19-November 11

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

Posted 28 November 2011 - 05:04 AM

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. This is done through the $sessionCount variable

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.

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 everytime, so submitting 20 questions from the textarea would mean the table would contain 20 blank rows and 20 rows with questions. I am guessing it is because of this for example:

    var enumeratorCell = document.createElement("td");


So what I want to know is how excepting creating an element to create a new row, how can I retrieve an element so that it submits the question in an existing row from top to bottom rather than creating a new row everytime a question is submitted?

Below is my 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 questionText = textarea.value;
    var questionContent = document.createTextNode(questionText);
    questionCell.appendChild(questionContent);


}

HTML:
    // 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>
            </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 class='trheight'>
    </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>

Was This Post Helpful? 0
  • +
  • -

#10 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 947
  • View blog
  • Posts: 2,355
  • Joined: 15-February 11

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

Posted 28 November 2011 - 05:38 AM

Hey, you're better of using the NAME attribute to identify the rows so therefore your textareas should look something like this. You're then able to use document.getElementsByName('element')[index] to get the exact element.

Keep an incremental counter so that you'll know the last textarea that received a question.
var index = 0;
var insertQuestion = function(){
    document.getElementsByName('question')[index].value = 'Question Here';
    index++; //increment for the next question
}


Was This Post Helpful? 0
  • +
  • -

#11 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

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

Posted 28 November 2011 - 04:47 PM

No problem. Hope you work out the proper validations and restrictions for this thing. Good luck. ^^
Was This Post Helpful? 0
  • +
  • -

#12 carlbrooks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 19-November 11

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

Posted 28 November 2011 - 06:17 PM

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>

Attached File(s)


Was This Post Helpful? 0
  • +
  • -

#13 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 947
  • View blog
  • Posts: 2,355
  • Joined: 15-February 11

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

Posted 28 November 2011 - 06:40 PM

Stop creating duplicate threads about the same problem. Visit the old threads and look at the replies then post there!
Was This Post Helpful? 0
  • +
  • -

#14 macosxnerd101  Icon User is online

  • Self-Trained Economist
  • member icon




Reputation: 10595
  • View blog
  • Posts: 39,246
  • Joined: 27-December 08

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

Posted 28 November 2011 - 06:44 PM

Duplicate threads merged. Please avoid duplicate posting.
Was This Post Helpful? 0
  • +
  • -

#15 carlbrooks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 19-November 11

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

Posted 29 November 2011 - 11:24 AM

I have a function below where every time a question is submitted, it will add a new row in the table with a textbox which allows numbers entry only. My question is that I don't know how to code these features in this function:

1: I want the text box to be between 0 and 100, so if text box contains a number which is above 100, it will automatically change the number to the maximum number which is 100.

Does any one know how to code this in my function below in javascript:

function insertQuestion(form) 
    {   
    
         var row = document.createElement("tr");
         var cell, input;
    
    cell = document.createElement("td");
         cell.className = "weight";
         input = document.createElement("input");
         input.name = "weight_" + qnum;
         input.onkeypress = "return isNumberKey(event)";
         cell.appendChild(input);
         row.appendChild(cell);
    }

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2