经过大量研究，我学会了如何使用javascript复制HTML表单的一部分，在我尝试将php添加到javascript中之前，它运行良好。
本页面的目的是让活动组织者提交每位员工通过销售获得的收入。
我的问题是，我希望"员工姓名"在每个副本上显示为下拉菜单，该字段将从员工表中检索
这是我的代码：
<script type = "text/javascript">
var record = 1;
function add_fields() {
record++;
var objTo = document.getElementById('staff_sales')
var divtest = document.createElement("div");
divtest.innerHTML = '<div class="label">Record ' + record + ':</div><div class="content"><span>Name: <select name="stock_type_id[' + record + ']">
<?php
$squery=mysqli_query($link, "SELECT * FROM staff") ;
while ($srow=mysqli_fetch_array($squery)) {
$sid=$srow["staff_id"];
$sname=$srow["staff_name"];
echo "<option value='"$sid'">$sname</option>";
}
?>
</select>
<input type="text" style="width:48px;" name="staff_id[' + record + ']" value="" /></span><span> Sales: <input type="number" style="width:48px;" name="staff_sales[' + record + ']" value="" /></span></div>';
objTo.appendChild(divtest)
} < /script><?php include("../includes/con_db.php"); ?>
<form method="post" action="<?php $_PHP_SELF ?>" name="addsales" id="addsales">
<table width="400" border="0" cellspacing="1" cellpadding="2">
<div>
<tr>
<td width="100">Date</td>
<td>
<input name="income_date" type="date" id="income_date" required>
</td>
</tr>
<tr>
<td width="100">Event</td>
<td>
<input name="income_event" type="text" id="income_event" required>
</td>
</tr>
</div>
</table>
<div id="staff_sales">
<div class='label'>Record 1:</div>
<div class="content">
----------
This dropdown menu works fine:
<span>Name: <select name='staff_id[]'>
<?php
$squery=mysqli_query($link, "SELECT * FROM staff") ;
while ($srow=mysqli_fetch_array($squery)) {
$sid=$srow["staff_id"];
$sname=$srow["staff_name"];
echo "<option value='"$sid'">$sname</option>";
}
?>
</select>
----------
<input type="text" style="width:48px;" name="staff_id[]" value="" /></span>
<span> Sales: <input type="number" style="width:48px;" name="staff_sales[]" value="" /></span>
</div>
</div>
</br>
<input type="button" id="more_fields" onclick="add_fields();" value="Add More staff" />
<input name="add" type="submit" id="add" value="Submit sales">
</form>
</body>
</html>在Javascript中连接字符串时，换行很重要。这里有一个小演示：
<script>
//single line, works
var str_test = '<div class="label">Record ' + ' here comes a ' + '<?php echo "string from PHP" ?>' + '</div>';
console.log('str_test = ', str_test);
//multiple with + at end of line, works
str_test = '<div class="label">Record ' + ' here comes a ' +
'<?php echo "string from PHP" ?>' + '</div>';
console.log('str_test = ', str_test);
//does not work - string truncated as <div class="label">Record here comes a
str_test = '<div class="label">Record ' + ' here comes a '
'<?php echo "string from PHP" ?>' + '</div>';
console.log('str_test = ', str_test);
</script>
以下是我在这种情况下的建议：
<?php
//first build a staff array
$squery=mysqli_query($link, "SELECT * FROM staff") ;
$staff = array();
while ($srow = mysqli_fetch_array($squery)) {
//build an array, indexed by id
$id = $srow["staff_id"];
$staff[$id] = $srow;
//build the html right into the array
$staff[$id]['html'] = '<option value="$id">'.$srow["staff_name"].'</option>';
}
?>
然后，当我们进入Javascript时，它是干净的。
var html_str = '<div class="label">Record ' + record + ':</div>'+
'<div class="content">'+
'<span>Name: <select name="stock_type_id[' + record + ']">' +
'<?php foreach($staff as $a){ echo $a["html"]; } ?>'+
'</select>'+
'<input type="text" style="width:48px;" name="staff_id[' + record + ']" value="" /></span>'+
'<span> Sales: <input type="number" style="width:48px;" name="staff_sales[' + record + ']" value="" />' +
'</span></div>';
divtest.innerHTML = html_str;
//etc.... as before
此外，您可能在以下行的开头缺少一个<：
script type = "text/javascript" >