Dynamic Javascript form inputs with PHP data

[socialmd]

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.

[Airshow]

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