We Keep Coding

Disable Select Box option after its creation

I have a select box that is dynamically created from a mySQL database and then afterwards I use a function to add a "Please Select" option at Index[0] then I force Index[0] to be the selected option. My problem is trying to figure out how to make Index[0] disabled after the fact of its creation or maybe I have to do it during its creation in my function. So at the end of the day the "Please Select" option is not a valid choose-able option.
Thanks in advance for any advice.
<?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>
<?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]);
}
</script>
<script>
myFunction()
document.getElementById("regulars").selectedIndex = "0";
</script>

Just set the disabled attribute to true for the newly created option.
function myFunction() {
var x = document.getElementById("regulars");
var option = document.createElement("option");
option.text = "Please Select";
option.disabled = true;
x.add(option, x[0]);
}
myFunction();
document.getElementById("regulars").selectedIndex = "0";
<select id="regulars">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Simplest way is to do everything in PHP. No need of all the js to add the option.
The plus is that it will be part of the DOM and it will be easier to manipulate it later (i.e. to remove the disabled)
<?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'>";
$opt .= "<option value=\"\" disabled>Please select...</option>";
while($row = mysqli_fetch_assoc($result)) {
$opt .= "<option value'{$row['Regulars']}'>{$row['Regulars']}</option>\n";
}
$opt .="</select>"
?>

how to make the value fetched from mysql as selected option in a drop down using php or javascript

I'm getting the details from the user and storing it in mysql database. I have an update page in which the user can update the values. At that time, I want to allow the user to reselect the value from the drop down in which the value entered at first should be already selected. how can I make the value fetched from the database as selected option. please explain with some code samples.
$query="SELECT * from tablename where id=".$id;// I've assigned the value for id
$rows=mysql_query($query,$connect);
$row=mysql_fetch_array($rows,MYSQL_ASSOC);
?>
<select name="designation"> <?php
echo "<option value=\"$row[OptionID]\" SELECTED>$row[OptionName]</option>\n";
?>
<option value=sol1>sol1</option>
<option value=sol2>sol2</option>
<option value=sol3>sol3</option>
</select>

Making an assumption that you have a table with users (ID, UserID, OptionID) and a table of options (OptionID, OptionName) or similar.
$get_details = $conn->query("SELECT * FROM table");
$data = $get_details->fetch_assoc();
$get_options = $conn->query("SELECT * FROM options");
while($row = $get_options->fetch_assoc()) {
if($row['OptionID'] == $data['OptionID'])
echo "<option value=\"$row[OptionID]\" SELECTED>$row[OptionName]</option>\n";
else
echo "<option value=\"$row[OptionID]\">$row[OptionName]</option>\n";
}

In order to make a dropdown select box using a database you can follow the below given approach:
<?php
$databaseHost = "localhost";
$databaseUser = "root";
$databasePassword = "password";
$databaseName = "employee";
$con=mysql_connect($databaseHost ,$databaseUser ,$databasePassword,'employee')or die ('Connection Error');
$dbSelected = mysql_select_db('foo', $con);
if (!$dbSelected) {
die ('Can\'t use foo : ' . mysql_error());
}
?>
<strong> Select Designation : </strong>
<select name="empName">
<option value=""> -----------ALL----------- </option>
<?php
$dd_res=mysqli_query($con, "Select DISTINCT designation from emp");
while($r=mysqli_fetch_row($dd_res))
{
echo "<option value='$r[0]'> $r[0] </option>";
}
?>
</select>
UPDATE
For old MySQl:
<?php
$databaseHost = "localhost";
$databaseUser = "root";
$databasePassword = "password";
$databaseName = "employee";
$con=mysql_connect($databaseHost ,$databaseUser ,$databasePassword)or die ('Connection Error');
$db_selected = mysql_select_db('foo', $con);
if (!$db_selected) {
die ('Can\'t use foo : ' . mysql_error());
}
?>
<strong> Select Designation : </strong>
<select name="empName">
<option value=""> -----------ALL----------- </option>
<?php
$dd_res=mysql_query("Select DISTINCT designation from emp");
while($r=mysql_fetch_row($dd_res))
{
echo "<option value='$r[0]'> $r[0] </option>";
}
?>
</select>

Why isn't my ajax code updating my second dropdown?

I have no idea why my code isn't working. I basically have two dropdowns, the first is populated from an mssql database and I want the second dropdown to update dependant on the selection in the first.
Below is my code which populates a dropdown box:
<?php
session_start();
$serverName = "REDACTED";
$connectionInfo = array( "Database"=>"REDACTED", "UID"=>"REDACTED", "PWD"=>"REDACTED");
$conn = sqlsrv_connect( $serverName, $connectionInfo);
if (!isset($_SESSION['nID']))
{
header("Location: Login.php");
die();
}
function loadRegion()
{
include 'config.php';
$output = '';
$regionQuery = 'select distinct id, region from regionsHaiss order by id';
$regionPopulate = sqlsrv_query($conn, $regionQuery, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
while($row = sqlsrv_fetch_array($regionPopulate))
{
$output .= "<option value=\"".htmlspecialchars($row['ID'])."\">".$row['region']."</option>";
}
return $output;
}
?>
I then use this to populate the first dropdown:
<p>Select a Region
<select name ="region" id ="region">
<option value ="">Select Region</option>
<?php echo loadRegion(); ?>
</select></p>
For the second dropdown box I have the following:
<p>Select a Territory
<select name="territory" id="territory">
<option value="">Select Territory</option>
</select></p>
I call my ajax via:
<script>
$(document).ready(function(){
alert("ready");
$('#region').change(function(){
var region_id = $(this).val();
$.ajax({
url:"getter.php",
method:"POST",
data:{regionId:region_id},
dataType:"text",
success:function(data){
$('#territory').html(data);
}
});
});
});
</script>
My getter page reads as follows:
<?php
session_start();
include 'config.php';
$output = '';
$sql = "SELECT distinct id,territory,rid FROM territoriesHaiss where RID = '".$_POST["regionId"]."' order by id";
$result = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
$output = '<option value ="">Select Territory</option>';
while($row = sqlsrv_fetch_array($result))
{
$output .= "<option value=\"".htmlspecialchars($row['ID'])."\">".$row['territory']."</option>";
}
echo $output;
?>

As pointed out by the 2 comments above (thanks again for the help!) the error was in the code that populates the first dropdown. It should have been a lowercase 'ID', like follows:
function loadRegion()
{
include 'config.php';
$output = '';
$regionQuery = 'select distinct id, region from regionsHaiss order by id';
$regionPopulate = sqlsrv_query($conn, $regionQuery, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
while($row = sqlsrv_fetch_array($regionPopulate))
{
$output .= "<option value=\"".htmlspecialchars($row['id'])."\">".$row['region']."</option>";
}
return $output;
}
?>

I am populating a text box with data from a select, it works, but

My select consists of two fields and the text field only picks up one of them. Here is my code:
<script>
function ProdValue(data) {
document.getElementById("ProdName").value = data.value;
}
</script>
<select name="ProdName" id="ProdName" onchange ="ProdValue(this)">
<?php
$sql = "Select * from tblProduct";
if ($result = mysqli_query($conn, $sql));
while ($row = mysqli_fetch_assoc($result))
{
echo "<option value='". $row['Brand']."', '".$row['ProductName']."'>".$row['Brand']." ".$row['ProductName']. '</option>';
}
?>
</select>
How can I get ProductName too?

Since your option value contains brand and productname separated by comma, you could do:
function ProdValue(data) {
var optval = data,
prod_name = optval.split(",")[1];
console.log( prod_name ); //here is your product name
document.getElementById("ProdName").value = optval;
}

use this instead. If both columns are actually defined as NOT NULL, CONCAT() will be quite enough:
<?php
$sql = "Select CONCAT(Brand, ProductName) as CombineColumn from tblProduct";
if ($result = mysqli_query($conn, $sql))
{
while ($row = mysqli_fetch_assoc($result))
{
echo "<option value='". $row['CombineColumn']."'>".$row['CombineColumn']."</option>";
}
}
?>

Return dynamic select to null onChange

I have two select boxes, the second of which is dependent upon the selection in the first. I want to get the second select box (course) to have a value of null when the first box (subject) is changed. Any help on accomplishing this would be greatly appreciated.
This is what I have tried:
Javascript:
function autoSubmit() {
var formObject = document.forms['theForm'];
formObject.submit();
}
PHP:
<form name="theForm" method="get">
<select name="subject" onChange="autoSubmit();">
<option value="null">Select a Subject...</option>
<php
$sql = "SELECT DISTINCT subj_name, subj_id FROM table1 ORDER BY subj_name
$result = mysql_query($sql) or die ("couldn't execute query");
while($row = mysql_fetch_array($result))
{
echo ("<option value=\"$row[subj_id]\" " . ($subject == $row["subj_id"] ? "
selected" : "") . ">$row[subj_name]</option>");
}
?>
</select>
<select name="course" onChange="autoSubmit();">
<option value="null">All Courses</option>
<php
if($subject != null && is_numeric($subject))
{
$sql = "SELECT DISTINCT subj_id, course_id, course_name FROM table1
WHERE subj_id = $subject ORDER BY course_name
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo ("<option value=\"$row[course_id]\" " . ($course == $row["course_id"] ?
" selected" : "") . ">$row[course_number] - $row[course_name]</option>");
}
}
?>
</select>
</form>

You can put in the onChange of the first select, before the autoSubmit() :
this.form.course.value='null';
or
this.form.course.selectedIndex=0;
This way the value on the get will be ?subject=[the_subject]&course=null ( and then $course == $row["course_id"] will be false ).
( http://jsfiddle.net/HMT34/ )