php while loop in javascript function

Question

I have some code that allows me to use javascript to add rows to a result table. I basically setup the first row in a table, and then have an add row button that will duplicate the row. this works fine accept when I try to add a dropdown field that uses php to pull results. The row still adds when I click the button, but the php dropdown portion doesn't showup.

    function addOpenResult() {
  var openResults = document.getElementById("openResults");
  var openResultsRow = openResults.insertRow(openResults.rows.length-1);
  var col1html = "<td width='50'><input size='5' width='100' type='text' name='rsRD1' /></td>";
  var col2html = "<td width='50'><input size='5' width='100' type='text' name='rsRD2' /></td>";
  var col3html = "<td width='50'><input size='5' width='100' type='text' name='rsRD3' /></td>";
  var col4html = "<td width='50'><input size='5' width='100' type='text' name='rsRD4' /></td>";
  var col5html = "<td width='100'><input size='10' width='100' type='text' name='rsScore' /></td>";
  var col6html = "<td width='200'><select name='playerID'><option selected>---- Select Player ---</option>" . <?php while ($trpRow=mysql_fetch_array($trpResult)) {extract($trpRow); echo '<option value=$playerID>$lastName, $firstName</option>' ;}?> . "</select></td>";
  var col7html = "<td width='100'><input size='10' type='text' name='rsAmount' /></td>";
  var col8html = "<td width='100'><input size='10' type='text' name='rsOtherWinnings' /></td>";
  var col9html = "<td width='100'><input size='10' type='text' name='rsOtherValue' /><input type='hidden' name='catID' value='15'></td>";


  var col1 = openResultsRow.insertCell(0); col1.innerHTML=col1html;
  var col2 = openResultsRow.insertCell(1); col2.innerHTML=col2html;
  var col3 = openResultsRow.insertCell(2); col3.innerHTML=col3html;
  var col4 = openResultsRow.insertCell(3); col4.innerHTML=col4html;
  var col5 = openResultsRow.insertCell(4); col5.innerHTML=col5html;
  var col6 = openResultsRow.insertCell(5); col6.innerHTML=col6html;
  var col7 = openResultsRow.insertCell(6); col7.innerHTML=col7html;
  var col8 = openResultsRow.insertCell(7); col8.innerHTML=col8html;
  var col9 = openResultsRow.insertCell(8); col9.innerHTML=col9html;
  var col10 = openResultsRow.insertCell(9); col10.innerHTML=col10html;
}

Answer 1

The PHP code is ran once server side when your page is generated then sent to the browser to be interpreted. If you view the source of your page you'll see there's an error in your generated JavaScript. From looking at this it would seem your generated JavaScript string is not quoted.

var col6html = "<td width='200'><select name='playerID'><option selected>---- Select Player ---</option>" <?php while ($trpRow=mysql_fetch_array($trpResult)) {extract($trpRow); echo " + '<option value=$playerID>$lastName, $firstName</option>'" ;}?> + "</select></td>";

I haven't tested but something like that should do it. I moved the concatenation operator inside the generated code and added quotes.

Answer 2

You're using a PHP string concat operator . in a Javascript string concatenation operation. You should be using the Javascript concat operator +

Also

echo '<option value=$playerID>$lastName, $firstName</option>' should also be wrapped with double quotes because you're looking to output it as a Javascript string

echo '"<option value=$playerID>$lastName, $firstName</option>"'

Answer 3

You're incorrectly concatenating your JavaScript string with PHP content. Change

var col6html = "<td width='200'><select name='playerID'><option selected>---- Select Player ---</option>" . <?php while ($trpRow=mysql_fetch_array($trpResult)) {extract($trpRow); echo '<option value=$playerID>$lastName, $firstName</option>' ;}?> . "</select></td>";

To

<?php
$options = "";
while ($trpRow=mysql_fetch_array($trpResult)) {
    extract($trpRow);
    $options .=  "<option value=\"$playerID\">$lastName, $firstName</option>" ;
}
?>
var col6html = "<td width='200'><select name='playerID'>"+ 
                  "<option selected>---- Select Player ---</option>" +
                  <?php echo json_encode($options) ?>  +
               "</select></td>";