PHP Dropdown Menu from DB column values - php

Question

WHAT I STARTED WITH
My php
<?php
mysql_select_db("$db") or die(mysql_error());
$sql = "SELECT kpi FROM pin_kpi_types";
$query = mysql_query($sql);
echo '<select name="KPI" style="width: 400px">';
while ($row = mysql_fetch_assoc($query)) {
echo '<option>'.$row['KPI'].'</option>';
}
echo '</select>';
?>
My current label/input method that requires me to manually type.
What I am trying to do is pull a query from a table to select the only available KPI types.
This is working now.
<p>
<label for="KPIType" id="preinput">Choose KPI Type: </label>
<input type="text" name="kpi_type" required placeholder="Lead" id="inputid" />
</p>
WHERE I WAS AT PREVIOUS
Edit; Unfortunately the answer posted by Lucky didn't quiet help me, but it steered me in the right way.
I am now have duplicate fields? It isn't posting the value into the DB. either.
Here is a screenshot...
http://s30.postimg.org/o1c2l9yr5/Untitled.png
Can someone steer me in right direction of where I went wrong? :)
Thank you in advance for any help.
<?php
include('db.php');
$select=mysql_query("SELECT * FROM pin_kpi_types");
$i=1;
while( $userrow=mysql_fetch_array($select) )
{
$kpi_id =$userrow['KPI_ID'];
$kpi =$userrow['KPI'];
?>
<style>
#CreateStatusTypeFORM label {display: inline-block;width: 10em; text-align: right;padding-right: 0.5em;}
</style>
<div id="CreateStatusTypeFORM">
<form action="insert.php" method="post" name="insertform">
<p>
<div align='center'><label for="StatusColor" id="preinput">Choose A Color: </label>
<ui-colorpicker ng-model="targetColor"></ui-colorpicker></div>
<input type="hidden" name="pinstatus_color" value="{{targetColor}}" id="inputid" />
</p>
<p>
<label for="StatusName" id="preinput">Set Status Name: </label>
<input type="text" name="pinstatus_type" required placeholder="Come Back" id="inputid"/>
</p>
<p>
<label for="StatusName" id="preinput">Available KPI Types: </label>
<select name="<?php echo $kpi; ?>" style="width: 237px">
<option name="KPI" required id="inputid" value="<?php echo $kpi; ?>"><?php echo $kpi; ?></option>
</select>
</p>
<?php } ?>
<input type="submit" name="send" value="Submit" id="inputid1" />
</p>
</form>
WHERE I AM AT NOW
This is where I am at. I now can get the dropdown correct without duping it over and over. However, now I cannot get the value to post the actual selected KPI to the DB. everything else submits data to the db, but KPI_type option.
<style>
.StatusForm {padding-left:75px;}
.CreateStatusTypeFORM {padding:25px;border-style:solid; border-color:solid black; width: 500px;background-color:#C4C4C4;}
#CreateStatusTypeFORM label {display: inline-block;width: 100em;}
#CreateStatusTypeFORM input {border-color:solid black;}
#CreateStatusTypeFORM input[type=text] {padding:5px; border:1px solid #666; -webkit-border-radius: 5px; border-radius: 5px;}
</style>
<div class='StatusForm'>
<div class="CreateStatusTypeFORM">
<H3> ADD New Status </H3>
<form action="insert.php" method="post" name="insertform">
<p>
<label for="StatusColor" id="preinput">Choose A Color: </label>
<ui-colorpicker ng-model="targetColor"></ui-colorpicker>
<input type="hidden" name="pinstatus_color" value="{{targetColor}}" id="inputid" required placeholder=""/>
</p>
<p>
<label for="StatusName" id="preinput">Set Status Name: </label>
<input type="text" name="pinstatus_type" required placeholder="" id="inputid"/>
</p>
<p>
<label for="KPI" id="preinput">Available KPI Types: </label>
<select>
<?php
include('db.php');
$select2=mysql_query("SELECT * FROM pin_kpi_types ORDER BY KPI_ID DESC");
while( $userrow=mysql_fetch_array($select2) )
{
$kpi =$userrow['KPI'];
$kpi_id =$userrow['KPI_ID'];
?>
<option name="kpi_type" required id="inputid" value="<?php echo $kpi; ?>"><?php echo $kpi; ?></option><?php } ?>
</select>
</p>
<input type="submit" name="send" value="Submit" id="inputid1" />
</p>
</form>
</div>
</div>
This is the insert function.
<?php
ob_start();
include("db.php");
if(isset($_POST['send'])!="")
{
$pinstatus_type =mysql_real_escape_string($_POST['pinstatus_type']);
$kpi_type =mysql_real_escape_string($_POST['kpi_type']);
$pinstatus_color =mysql_real_escape_string($_POST['pinstatus_color']);
$update =mysql_query("
INSERT INTO pin_status_types(
pinstatus_type,
kpi_type,
pinstatus_color,
created
)
VALUES(
'$pinstatus_type',
'$kpi_type',
'$pinstatus_color',
now()
)
");
if($update)
{
$msg="Successfully Updated!!";
echo "<script type='text/javascript'>alert('$msg');</script>";
header('Location:index.php');
}
else
{
$errormsg="Something went wrong, Try again";
echo "<script type='text/javascript'>alert('$errormsg');</script>";
}
}
ob_end_flush();
?>

Answer 1

mysql_select_db("$db") or die(mysql_error());
$sql = "SELECT kpi FROM pin_kpi_types";
$query = mysql_query($sql);
echo '<label for="KPIType" id="preinput">Choose KPI Type: </label>';
echo '<select name="KPI" style="width: 400px" required id="inputid">';
echo '<option value=''>Lead</option>';
while ($row = mysql_fetch_assoc($query)) {
echo '<option value='.$row['KPI'].'>'.$row['KPI'].'</option>';
}
echo '</select>';

Answer 2

<?php
include 'config.php';
$sql_states=mysqli_query($conn,"SELECT * FROM master_states");
?>
<section Name="state_name">
<option value="">section1</option>
<option value="">section2</option>
</section>