Dynamically created select box not accepting option added by function
Question
I have a short bit of code here that connects to a DB called karaoke and populates a select box. I just want to be able to add a select box option at index 0 that says something like "Please Select". I've tried multiple ways to do this in PHP, HTML, and Javascript, but haven't found a solution that I need. So far this code shows 0 errors in the Chrome debugger, but doesn't act as I expect. Can someone tell me what I'm doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<title>Add Singer</title>
</head>
<body>
<center><label style = "color: white; font-family:arial; font-size: 24px">Select a Regular</label></center>
<?php
$con = mysqli_connect("localhost","root","","karaoke");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "Select * FROM regulars ORDER BY Regulars ASC";
$result = mysqli_query($con, $sql) or die("Bad SQL: $sql");
$opt = "<select id = 'regulars' name = 'regulars'>";
while($row = mysqli_fetch_assoc($result)) {
$opt .= "<option value'{$row['Regulars']}'>{$row['Regulars']}</option>\n";
}
$opt .="</select>"
?>
<center> <div id="regulars">
<?php
echo $opt;
?>
</div> </center>
<script>
function myFunction() {
var x = document.getElementById("regulars");
var option = document.createElement("option");
option.text = "Please Select";
x.add(option, x[0]);
}
</sript>
myFunction()
</body>
</html>
1 answers
solution1
1 2018-07-25 12:51:26
You have a div tag with an id="regulars". This tag comes before you print out the $opt variable containing your select element which also has an id="regulars". The Javascript code is finding the first element with the "regulars" id which would be the div. Try changing the id of the div.
As mentioned in the comments, the myFunction function call should be in the script tags. The option tags should contain = for the value attribute.
<!DOCTYPE HTML>
<html>
<head>
<title>Add Singer</title>
</head>
<body>
<center><label style = "color: white; font-family:arial; font-size: 24px">Select a Regular</label></center>
<?php
$con = mysqli_connect("localhost","root","","karaoke");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "Select * FROM regulars ORDER BY Regulars ASC";
$result = mysqli_query($con, $sql) or die("Bad SQL: $sql");
$opt = "<select id = 'regulars' name = 'regulars'>";
while($row = mysqli_fetch_assoc($result)) {
$opt .= "<option value='{$row['Regulars']}'>{$row['Regulars']}</option>\n";
}
$opt .="</select>"
?>
<center> <div id="regularsDiv">
<?php
echo $opt;
?>
</div> </center>
<script>
function myFunction() {
var x = document.getElementById("regulars");
var option = document.createElement("option");
option.text = "Please Select";
x.add(option, x[0]);
}
myFunction();
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.