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

【问题标题】：Duplicating html form javascript with embedded dropdown from mysql in php在php中从mysql中复制带有嵌入式下拉列表的html表单javascript
【发布时间】：2016-04-17 08:23:26
【问题描述】：

经过大量研究，我学会了如何使用 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 的 php，它可以正常工作（显然没有下拉菜单），当它是表单时不会重复。
是的，你已经说过了。但我很确定你的控制台中会出现一些错误。或 php 错误。
做一些调试......你在添加到dom之前记录了divtest吗？内容好吗？我敢打赌，错误就在某个地方。一个缺失/错误的引用 f.e.
我强烈建议首先构建html/string，然后然后将它应用到divtest.innerHTML。更容易调试。而且你正在做两次相同的数据库查询......不太好八次

标签： javascript php html mysql drop-down-menu

【解决方案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" >

【讨论】：