Click here to Skip to main content
13,087,784 members (78,470 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


Advertise | Privacy |
Web02 | 2.8.170813.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