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

Question

After much research i learned how to duplicate part of my HTML form using javascript, it works well until i try to add php into the javascript.

The purpose of this page is for an event organiser to submit how much income each staff made through sales.

My problem is that i want the "staff name" displayed as a dropdown menu on each duplicate, this field will be retrieved from the staff table

this is my code:

 <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

When you concatenate a string in Javascript, line breaks matter. Here's a little demo:

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

Here's what I'd recommend in this case:

   <?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>'; 
     }
    ?>

Then when we get into the Javascript, it's clean.

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

Also, you may be missing a < at the beginning of this line:

script type = "text/javascript" >