Making the options in a drop down list html element items in a javascript list?

Question

<html>
<body>
<?php
//student interface
$file = fopen("subject.csv","r");
$subjects = fgetcsv($file);
fclose($file);
//puts the csv file provided into a 2d array
$studentTable = array();
if (($handle = fopen("students.csv", "r")) !== FALSE) {
 while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
  $studentTable[] = $data;
 }  fclose($handle);
}
//creates list that will store list of girls emails
$usernames = array();
//runs through studentTable and appends emails to toEmail. 
for ($I = 0; $I < sizeof($studentTable); $I++){
       array_push($usernames, $studentTable[$I][0]);
  }  

?>
<script type="text/javascript"> 
   
// Using PHP implode() function to turn the php list into a javascript list
var subjects = <?php echo '["' . implode('", "', $subjects) . '"]' ?>; 
var usernames = <?php echo '["' . implode('", "', $usernames) . '"]' ?>; 
var select = document.getElementById("usernames");
for(var i = 0; i < usernames.length; i++) {
    var opt = usernames[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}
var subchoice = [];
subchoice.push(document.getElementById("choice1"), document.getElementById("choice2"), document.getElementById("choice3"), document.getElementById("choice4"), document.getElementById("choice5"));
for(var x = 0; x < subchoice.length; x++) {
 for(var i = 0; i < subjects.length; i++) {
  var opt = subjects[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  subchoice[x].appendChild(el);
 }
}
var six = [];
six = subjects;
six.push("null");
var select = document.getElementById("choice6");
for(var i = 0; i < six.length; i++) {
    var opt = six[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}
</script> 
<h2> Select your subjects! </h2>
<form>
<p> Select your name </p>
<select id='usernames' name='usernames'>
<option>Choose a username</option>
</select>
<p> Select your 1st choice subject </p>
 <select id='choice1' name='choice1'>
 <option>Choose a subject</option>
 </select>
<p> Select your 2nd choice subject </p>
 <select  id='choice2' name='choice2'>
 <option>Choose a subject</option>
 </select>
<p> Select your 3rd choice subject </p>
 <select id='choice3' name='choice3'>
 <option>Choose a subject</option>
 </select>
<p> Select your 4th choice subject </p>
 <select  id='choice4' name='choice4'>
 <option>Choose a subject</option>
 </select>
<p> Select your 5th choice subject </p>
 <select id='choice5' name='choice5' >
 <option>Choose a subject</option>
 </select>
<p> Select your 6th choice subject (none is an option) </p>
 <select id='choice6' name='choice6'>
 <option>Choose a subject</option>
 </select>
</form>

</body>
</html>

I can't get anything to appear in the drop down tabs. The drop down should be the items in either the subject or username list. However, nothing happens even though I think I have coded it correctly. It gives me this error message: "Uncaught SyntaxError: Unexpected token '<'" I have looked for this extra token but can not seem to find it, please help!

Whatever 'it' is that's telling you there's an unexpected token will also tell you what line it's on. If you view souce you'll see where it is. — Tom Boothman, Dec 17 '19 at 00:44
**Don't mix JS & PHP.** Your `unexpected` item doesn't exists in this part of code, Ctrl+F can't find it. Study how to read errors and [how to debug JS code](https://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Aksen P, Dec 17 '19 at 06:56
I am actually able to turn the php array into a js array. The issue lies within this statement ------- for(var i = 0; i < usernames.length; i++) { var opt = usernames[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); } --- I don't know why these statements are giving errors, as I know the javascript arrays are populated correctly. An issue with select.appendChild(el) maybe? why? — casualcoder, Dec 17 '19 at 13:34

score 0 · Accepted Answer · answered Dec 20 '19 at 16:49

<html>
<body>
<?php
//student interface
$file = fopen("subject.csv","r");
$subjects = fgetcsv($file);
fclose($file);
//puts the csv file provided into a 2d array
$studentTable = array();
if (($handle = fopen("students.csv", "r")) !== FALSE) {
 while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
  $studentTable[] = $data;
 }  fclose($handle);
}
//creates list that will store list of girls emails
$usernames = array();
//runs through studentTable and appends emails to toEmail. 
for ($I = 0; $I < sizeof($studentTable); $I++){
       array_push($usernames, $studentTable[$I][0]);
  }  

?>
<h2> Select your subjects! </h2>
<form method="POST" action='handlestudents.php'>
<p> Select your name </p>
<select id='userN' name='userN'>
        <option selected="selected">Choose one</option>
        <?php
        // Iterating through the product array
        foreach($usernames as $item){
        ?>
        <option value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option>
        <?php
        }
        ?>
</select>
<p> Select your 1st choice subject </p>
 <select id='choice1' name='choice1'>
 <option selected="selected" >Choose a subject</option>
        <?php   
        // Iterating through the product array
        foreach($subjects as $item){
        ?>
        <option value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option>
        <?php
        }
        ?>
 </select>
<p> Select your 2nd choice subject </p>
 <select  id='choice2' name='choice2'>
  <option selected="selected" >Choose a subject</option>
        <?php   
        // Iterating through the product array
        foreach($subjects as $item){
        ?>
        <option value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option>
        <?php
        }
        ?>
 </select>
<p> Select your 3rd choice subject </p>
 <select id='choice3' name='choice3'>
  <option selected="selected" >Choose a subject</option>
        <?php   
        // Iterating through the product array
        foreach($subjects as $item){
        ?>
        <option value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option>
        <?php
        }
        ?>
 </select>
<p> Select your 4th choice subject </p>
 <select  id='choice4' name='choice4'>
  <option selected="selected" >Choose a subject</option>
        <?php   
        // Iterating through the product array
        foreach($subjects as $item){
        ?>
        <option value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option>
        <?php
        }
        ?>
 </select>
<p> Select your 5th choice subject </p>
 <select id='choice5' name='choice5' >
  <option selected="selected" >Choose a subject</option>
        <?php   
        // Iterating through the product array
        foreach($subjects as $item){
        ?>
        <option value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option>
        <?php
        }
        ?>
 </select>
<p> Select your 6th choice subject (none is an option) </p>
 <select id='choice6' name='choice6'>
  <option selected="selected" >Choose a subject</option>
        <?php
        // Iterating through the product array
        foreach($subjects as $item){
        ?>
        <option value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option>
        <?php
        }
        ?>
  <option value = ""> None </option>
 </select>
<input type="submit" value="Submit">
</form>
</body>
</html>

Making the options in a drop down list html element items in a javascript list?

1 Answers1