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.

$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 );


	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>";
<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">
			<input size="10" type="button" value="Add another text input" onClick="addInput('dynamicInput');">
						<input type="submit" name="addTimeEntry" id="addTimeEntry" value="Create" />


Thank you for your time and help ahead of time.


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.


commented: Very well written response, and gave several solutions. +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.