I'm trying to figure out how to use PHP in Javascript to fill in the options for my drop down menus for my dynamic inputs. I've tried several things already, but I have had no luck. This is how my code stands at the moment. Any ideas are greatly appreciated.

<?php
$timecodes = TimeCard::find_timecodes();
$catlist_timecode = "";
foreach($timecodes as $timecode) {
	$catlist_timecode .= "<option value=\"$timecode->id\" >$timecode->timecode_title</option>\n";
}

$jobs = Job::find_all();
$catlist_job = "";
foreach($jobs as $job) {
	$catlist_job .= "<option value=\"$job->id\" >$job->job_title</option><input type ='hidden' value=\"$job->work_order\" name='work_order' id='work_order' />\n";
}


if(isset($_POST["addTimeEntry"])) {

	$timeentry->card = $_POST["card"];
	$timeentry->code = $_POST["code"];
	$timeentry->job_id = $_POST["job_id"];
	$timeentry->work_order = $_POST["work_order"];
	$timeentry->drive_time = $_POST["drive_time"];
	$timeentry->straight_time = $_POST["straight_time"];
	$timeentry->over_time = $_POST["over_time"];
	$timeentry->mileage = $_POST["mileage"];
	
	$limit = count($report->request_date) ;
		for($i=0;$i<$limit;$i++) {
			
			$var1[$i] = $database->escape_value ($timeentry->card[$i]);
			$var2[$i] = $database->escape_value ($timeentry->code[$i]);
			$var3[$i] = $database->escape_value ($timeentry->job_id[$i]);
			$var4[$i] = $database->escape_value ($timeentry->work_order[$i]);
			$var5[$i] = $database->escape_value ($timeentry->straight_time[$i]);
			$var6[$i] = $database->escape_value ($timeentry->over_time[$i]);
			$var7[$i] = $database->escape_value ($timeentry->mileage[$i]);
			
			$sql = "INSERT INTO time_entry (job_id, work_order, drive_time, straight_time, over_time, mileage) VALUES";
		        $sql .= "('{$var1[$i]}', '{$var2[$i]}', '{$var3[$i]}', '{$var4[$i]}', '{$var5[$i]}', '{$var6[$i]}', '{$var7[$i]}')";
		        $database->query( $sql );
			}

}

?>
<script>
	var counter = 1;
var limit = 10;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "<table><tr><td><input size='10' type='text' name='card[]'><strong>Time Code</strong><select name='code[]'><?php echo $catlist_timecode; ?></select><br /><strong>Job</strong><select name='job_id[]'><?php echo $catlist_job; ?></select><br /><strong>Work Order</strong><input size='10' type='text' name='work_order[]'><br /><strong>Drive Time</strong><input size='10' type='text' name='drive_time[]'><br /><strong>Straight Time</strong><input size='10' type='text' name='straight_time[]'><br /><strong>Over Time</strong><input size='10' type='text' name='over_time[]'><br /><strong>Mileage</strong><input size='10' type='text' name='mileage[]'></table>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}
</script>
<div id="content">
<div id="content-container">
	<div class="box round">
			<div id="contentheader">
				<div id="tabs">
					<div id="tabs-1">
			<form action="time_entry.php" method="post">
				<div id="dynamicInput">
						
					</td>
				</tr>
			</table>
			</form>
			<input size="10" type="button" value="Add another text input" onClick="addInput('dynamicInput');">
						<input type="submit" name="addTimeEntry" id="addTimeEntry" value="Create" />
			</div>
			



						</div>
			</div>
</div>
	</div>
</div>

Thank you for your time and help ahead of time.

Socialmd,

Looks like it should work but you are being beaten by unescaped double quotes.

Although you escape in the statement $catlist_job .= ... , those escape characters don't make it through to the served page. View source and you will see what I mean.

There's a number of possible solutions.

  1. Build the statement newdiv.innerHTML = ... inside single quotes.
  2. Build $catlist_job with additional, literal backslashes, <option value=\\\"$job->id\\\" >... . That gives one escape character for now (php) and one for later (javascript).
  3. Serve a hidden version of the div complete with its table, input and select elements. This becomes an "in-DOM template" that can be cloned, unhidden and inserted elsewhere in the DOM.

Personally I would use approach 3 though it's maybe a little harder if you've not done any cloning before.

Airshow

commented: Very well written response, and gave several solutions. +0