PHPでmysqlの埋め込みドロップダウンメニューを複製する

Question

多くの研究の後、私はJavaScriptを使って自分のHTMLフォームの一部を複製する方法を学びましたが、javascriptにPHPを追加しようとするまでうまく動作します。

このページの目的は、イベント主催者が各スタッフが売上を通じてどれくらいの収入を得たかを提出することです。

私の問題は、私は、各重複のドロップダウンメニューとして表示される「スタッフの名前が」、このフィールドはスタッフテーブル

から取得されたいということで、これは私のコードです：

<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"]; 
 
\t \t \t 
 
       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"]; 
 
\t \t \t 
 
       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に入るとき、それはきれいです。

script type = "text/javascript" >