CODEWITHSUNDEEP
phphtmlajax
ME-dia
ME-dia

Reputation: 289

Click Button To Fill Listbox

I am trying to fill a listbox on a webpage and I want the listbox to start blank. Once the button is clicked the listbox should populate. My code below automatically fills the listbox but I would rather have the button do it.

<?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>Click "SUBMIT" to display the calculation results</p> 

<input type="submit" name="Submit" value="Submit" /> 

<br /> 

</form> 

</body> 

</html>

Upvotes: 2

Views: 1922

Answers (3)

Florian Mertens
Florian Mertens

Reputation: 2448

I would either: Preload the data into the page as some ready but invisible html list (maybe a bit n00b), or save the data as a javascript array and a function will load it into the page (better), or do an ajax call to the same page (for simplicity) (probably best, leaves you the option open for updated data after page initiation).

The Ajax route will have to use jQuery (change this_page.php to whichever page this is called):

<?php


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>

Essentially, what it does, it collects the data, checks if there is a request for the ajax data in the url, if not, it prints the rest of the page (with an empty select). If there is an ajax flag in the url, then the php will encode the data into json, print that and stop. When the User receives the page with an empty select, it clicks the button which will trigger the displayItems() function. Inside that function, it does a jQuery-based ajax call to the same page with the ajax flag set in the url, and the result (which is json), is evaluated to a valid javascript array. That array is then created into options and loaded into the RestName SELECT element.

A final cookie? You could just print the data as options, into the select anyway, just like the previous answers described. Then, inside the displayItems() function, you clear the select before loading it from the jQuery/ajax call. That way, the user will see data right from the beginning, and will only update this with the most recent data from the DB. Clean and all in one page.

Upvotes: 1

Color
Color

Reputation: 262

how about this simple way, is this what you mean,

its not safe, any one can post show=yes but i think you just like users to be able to simply click and see result

<select name="RestName"> 
<?php 

// if show=yes
if ($_POST['show'] == "yes"){

$dbc = mysql_connect('','','') 
 or die('Error connecting to MySQL server.'); 

mysql_select_db('MyDB'); 

$result = mysql_query("select * from tblRestaurants order by RestName ASC"); 

 while ($nt= mysql_fetch_assoc($result))  
{ 
     echo '<option value="' . $nt['RestID'] . '">' . $nt['RestName'] . '</option>'; 
}
}
?> 
</select>

<form method="post" action="#">
<input type="hidden" name="show" value="yes" />
<input type="submit" name="Submit" value="Submit" /> 
</form>

you can also simply use a hidden div to hid listbox and give the button an onclick action to show div, learn how in here: https://stackoverflow.com/a/10859950/1549838

Upvotes: 1

Dilhan Jayathilake
Dilhan Jayathilake

Reputation: 1890

<?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"); 
?>

<html>
<head>
<script>
function displayResult()
{
   var x =document.getElementById("RestName");
   var option;

   <?php 
 while ($nt= mysql_fetch_assoc($result))  
 {
       echo 'option=document.createElement("option");' .
            'option.value=' . $nt['RestID'] . ';' . 
            'option.text=' . $nt['RestName'] . ';' .
            'x.add(option,null);';
 }  
  ?>
}
</script>
</head>

<body>

  <select name="RestName"> 
  </select>

  <button type="button" onclick="displayResult()">Insert options</button>

  </body>
</html>

Read more about adding options to select element from java script here

Upvotes: 1

Related Questions