Click here to Skip to main content
12,956,257 members (60,204 online)
Rate this:
 
Please Sign up or sign in to vote.
See more:
I am trying to have a button on a webpage. When you click on it, the Dropdown box will load. The code I have below works fine, but I would rather start with an empty dropdown box and have it load when the button is clicked. Here is my working code....

<?php 
$dbc = mysql_connect('','','') 
     or die('Error connecting to MySQL server.'); 
 
mysql_select_db('MyDB'); 
 
$result = mysql_query("select * from tblRestaurants order by RestName ASC"); 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>SEARCH</title> 
 

</head> 
 
<body> 
<form method="post" action="1004mcout.php">
 

 
<p><center>SEARCH</CENTER></P> 
<select name="RestName"> 
<?php 
while ($nt= mysql_fetch_assoc($result))  
{ 
     echo '<option value="' . $nt['RestID'] . '">' . $nt['RestName'] . '</option>'; 
}  
?> 
</select>
 
<p> SPACE</p> 
 

<p></p> 
 

 

<p>Click "SUBMIT" to display the calculation results</p> 
 
<input type="submit" name="Submit" value="Submit" /> 
 
<br /> 
 

</form> 
 
</body> 
 
</html> 
Posted 10-Jan-13 11:43am
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

This works

 
while ($nt= mysql_fetch_assoc($result))
    $arrData[] = $nt;
 
if(isset($_GET["ajax"]))
{
    echo json_encode($arrData);
    die();
}
?>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
function displayItems()
{
    $.getJSON("this_page.php?ajax=true", function(data) {
        $.each(data, function(index, objRecord) {
            var option=document.createElement("option");
            option.value=objRecord.RestID;
            option.text=objRecord.RestName;
            $("#RestName").append('<option value="' + objRecord.RestID + '">' + objRecord.RestName + '</option>');
        });
    });
 
}
    </script>
    <title>SEARCH</title>
</head>
<body>
    <form method="post" action="1004mcout.php">
        <p><center>SEARCH</center></p>
        <select id="RestName"></select>
        <p> SPACE</p> 
        <p>Click "SUBMIT" to display the calculation results</p> 
        <button type="button" onclick="javascript:displayItems();">Insert options</button>
        <br /> 
    </form> 
</body> 
</html> 
  Permalink  
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

 
while ($nt= mysql_fetch_assoc($result))
    $arrData[] = $nt;
 
//If you want to test without DB, uncomment this, and comment previous
/*$arrData = array(
        array('RestID' => "1", 'RestName' => "Mike"),
        array('RestID' => "2", 'RestName' => "Sebastian"),
        array('RestID' => "3", 'RestName' => "Shitter")
        );*/
 
if(isset($_GET["ajax"]))
{
    echo json_encode($arrData);
    die();
}
?>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
function displayItems()
{
    $.getJSON("this_page.php?ajax=true", function(data) {
        $.each(data, function(index, objRecord) {
            var option=document.createElement("option");
            option.value=objRecord.RestID;
            option.text=objRecord.RestName;
            $("#RestName").append('<option value="' + objRecord.RestID + '">' + objRecord.RestName + '</option>');
        });
    });
 
}
    </script>
    <title>SEARCH</title>
</head>
<body>
    <form method="post" action="1004mcout.php">
        <p><center>SEARCH</center></p>
        <select id="RestName"></select>
        <p> SPACE</p> 
        <p>Click "SUBMIT" to display the calculation results</p> 
        <button type="button" onclick="javascript:displayItems();">Insert options</button>
        <br /> 
    </form> 
</body> 
</html> 
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

    Print Answers RSS
Top Experts
Last 24hrsThis month
OriginalGriff 6,869
CHill60 3,550
Maciej Los 3,243
ppolymorphe 2,070
Jochen Arndt 1,973


Advertise | Privacy | Mobile
Web02 | 2.8.170525.1 | Last Updated 10 Jan 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100