javascript - 在php中从mysql复制带有嵌入式下拉列表的html表单javascript

Question

经过大量研究，我学会了如何使用 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>

Answer 1

在 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" >