It is only displaying 1 row when inserting values

Question

My code below is supposed to display each question ($_POST[questionText]). For each question, it displays it's SessionId, QuestionId, QuestionContent and OptionId. But instead it is only displaying 1 question. Why is it only displaying 1 question and how can I get it to display all of the questions?

I use an echo to text the output with the INSERT VALUES.

foreach($_POST['questionText'] as $i => $question)
{

      $insertquestion = array();


$options[] = $_POST['gridValues'];

switch ($options[$i]){

    case "3": 
    $selected_option = "A-C";
    break;

    case "4": 
    $selected_option = "A-D";
    break;

    default:
    $selected_option = "";
    break;

}      

$optionquery = "SELECT OptionId FROM Option_Table WHERE (OptionType = '". mysql_real_escape_string($selected_option)."')";

 $optionrs = mysql_query($optionquery);
 $optionrecord = mysql_fetch_array($optionrs);
 $optionid = $optionrecord['OptionId']; 


    $insertquestion[] = "'". mysql_real_escape_string($_SESSION['id'] ) . ($_SESSION['initial_count'] > 1 ? $_SESSION['sessionCount'] : '') ."' ,'". mysql_real_escape_string( $_POST['num_questions'] ) ."','".  mysql_real_escape_string( $question ) ."','".  mysql_real_escape_string( $optionid ) ."'";

    $questionsql = "INSERT INTO Question (SessionId, QuestionId, QuestionContent, OptionId) 
    VALUES (" . implode('), (', $insertquestion) . ")";

    $i++;

    }

echo($questionsql);

Below is the javascript code and form code. How it works is the user types in a question in the textarea ('name='questionText') and types in an option (name='gridValues') and then they append them two in a table row (table in the form which id='qandatbl'). This is the question 1. Then they do the same again for second question, then third and etc. Please look at this carefully, it is easy to follow.

<script>

    function insertQuestion(form) {   

    var context = $('#optionAndAnswer');

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $question = $("<td class='question'></td>");
    var $options = $("<td class='option'></td>");
    var $questionType = '';

    $('#questionTextArea').each( function() {

    var $this = $(this);
    var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]")
                   .attr('value',$this.val())

    $question.append($questionText);

    });

    $('.gridTxt', context).each( function() {

     var $this = $(this);
     var $optionsText = $("<input type='text' class='gridTxtRow maxRow' />").attr('name',$this.attr('name'))
                     .attr('value',$this.val())

    $options.append($optionsText);
    $questionType = $this.val();

    });

    $tr.append($question);
    $tr.append($options);    
    $tbody.append($tr); 

    }

</script>

    <form id="QandA" action="insertQuestion.php" method="post" >

    <h1>SESSION (<?php echo $_SESSION['id'] ?>)</h1>

    <table>
    <tr>
        <td rowspan="3">Question:</td> 
        <td rowspan="3">
            <textarea id="questionTextArea" rows="5" cols="40" name="questionText"></textarea>
        </td>
    </tr>
    </table>

    <table id="optionAndAnswer" class="optionAndAnswer">
    <tr class="option">
    <td>Option Type:</td>
    <td>
    <div>
        <input type="text" name="gridValues" class="gridTxt maxRow" readonly="readonly" />
    </div>
    </td>
    </tr>
    </table>

    <table id="qandatbl" align="center">
    <thead>
    <tr>
        <th class="question">Question</th>
        <th class="option">Option Type</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
    </table>

    </form>

Answer 1

As far as I can tell from your code, it's doing this...

foreach($_POST['questionText'] as $i => $question)
{
    // insert the row
    $questionsql = '...';
    $i++;
    }
echo($questionsql);

So $questionsql is output right at the end of the loop, at which point it will contain data from only the last iteration.

If you want $questionsql to be output for each inserted row, it needs to go inside the loop.

Answer 2

first. can you please change you java script to:

var $optionsText = $("<input type='text' class='gridTxtRow maxRow' />").attr('name',$this.attr('name')+"[]")
                     .attr('value',$this.val())

then your php code to:

---

UPDATE

$i = 0;
$c = count($_POST['gridValues']);

print_r($_POST['questionText']);
print_r( $_POST['gridValues'] );

$insertquestion = array();

for($i = 0;  $i < $c; $i++ ){

    switch ($_POST['gridValues'][$i]){
        case "3": 
        $selected_option = "A-C";
        break;
        case "4": 
        $selected_option = "A-D";
        break;
        default:
        $selected_option = "";
        break;
    }      

    $optionquery = "SELECT OptionId FROM Option_Table WHERE (OptionType = '". mysql_real_escape_string($selected_option)."')";
    $optionrs = mysql_query($optionquery);
    $optionrecord = mysql_fetch_array($optionrs);
    $optionid = $optionrecord['OptionId']; 

    $insertquestion[] = "'". mysql_real_escape_string($_SESSION['id'] ) . 
                    ($_SESSION['initial_count'] > 1 ? $_SESSION['sessionCount'] : '') ."' ,'". 
                    mysql_real_escape_string( $_POST['num_questions'] ) ."','".  
                    mysql_real_escape_string( $_POST['questionText'][$i] ) ."','".  
                    mysql_real_escape_string( $optionid ) ."'";

}

 $questionsql = "INSERT INTO Question (SessionId, QuestionId, QuestionContent, OptionId) 
    VALUES (" . implode('), (', $insertquestion) . ")";

echo($questionsql);

Answer 3

$('#questionTextArea').each( function() {
...
}

This part of the function is going to only cause one iteration of the function to happen. Your using an id selector(unique) and the each function in combination. So your selecting one element and then using the each function to iterate over the one object.