Php – Fetch db data depending on selected drop down value

jqueryPHP

Is it possible to fetch data from db upon changing value of my drop down, I want to pull up the data that corresponds to the value of the drop down and show it to a text area, I got the codes that I've tried to create just don't know how to make it work to what I want.

I want my page to just initially show the drop down then after selecting a value it will show the data in a text area without refreshing the page, here is the code:

<div id="mainContent">
<table width="619" border="0" align="center">
<td align="center"><form id="form1" name="form1" method="post" action="" >
<fieldset>
<legend><strong>EA</strong></legend>
<p> 
<select name="ea_name" id="ea_name">
<option value="" selected="selected">Please select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
</fieldset>
</form></td>
</table>

<div id="results"></div>
</div>

I am thinking an "onchange" could do it but just dont know how to implement it, also want to echo the resulting data to a text area within a fieldset.

Here is the code that I've tried that will pull up data and show to a text area:

<?php
require 'include/DB_Open.php';

$ea_name = $_POST['ea_name'];

$sql="SELECT * FROM ea_error WHERE ea_name = '" . $ea_name . "'";

$myData = mysql_query($sql);

//to count if there are any results
$numrow = mysql_num_rows($myData);

if($numrow == 0)
{
    echo "No results found.";
}
else
{
echo "<fieldset><legend><strong>Information</strong></legend><p>
<table width="auto" height="172" border="0">
<tr><th scope="row">Error</th></tr>
<tr><th scope="row">Resolution</th></tr>
<tr><th scope="row">Contact/s</th></tr>;"

while($info = mysql_fetch_array($myData)) 
{
echo "<form action='retrieve.php' method='post'>";

echo"<tr>"; 
echo  "<td align='center'>" . $info['error'] . "<input type=hidden name=error value=" . $info['error'] . " </td>";
echo  "<td align='center'>" . $info['resolution'] . "<input type=hidden name=resolution value=" . $info['resolution'] . " size='11' maxlength='11' /> </td>"; 
echo  "<td align='center'>" . $info['contacts'] . "<input type=hidden name=contacts value=" . $info['contacts'] . "' /> </td>"; 
echo "</tr>"; 
echo "</form>";
}
}
echo "</fieldset>"; 

include 'include/DB_Close.php';
?>

UPDATED CODE:

<?php
require 'include/DB_Open.php';

$ea_name = $_POST['ea_name'];

$sql="SELECT * FROM ea_error WHERE ea_name = '" . $ea_name . "'";

$myData = mysql_query($sql);

//to count if there are any results
$numrow = mysql_num_rows($myData);

if($numrow == 0)
{
    echo "No results found.";
}
else
{
echo '<fieldset><legend><strong>Information</strong></legend><p>
<table width="auto" height="172" border="0">
<tr><th>Error</th></tr>
<tr><th>Resolution</th></tr>
<tr><th>Contact/s</th></tr>';

while($info = mysql_fetch_array($myData)) 
{
echo "<form action='retrieve.php' method='post'>";

echo"<tr>"; 
echo  "<td align='center'>" . $info['error'] . "<input type=hidden name=error value=" . $info['error'] . " </td>";
echo  "<td align='center'>" . $info['resolution'] . "<input type=hidden name=resolution value=" . $info['resolution'] . " size='11' maxlength='11' /> </td>"; 
echo  "<td align='center'>" . $info['contacts'] . "<input type=hidden name=contacts value=" . $info['contacts'] . "' /> </td>"; 
echo "</tr>"; 
echo "</form>";
}
}
echo "</fieldset>"; 

include 'include/DB_Close.php';
?>

Best Answer

This should do the trick. Just put this javascript either in script tags in the head of your page, after the jQuery include, or in another js file and include that after jQuery...

$(function() {  //  document.ready
    $("#ea_name").on("change", function() {
        $.ajax({
            url: "phpfile.php",
            type: "POST",
            data: {
                ea_name: $(this).val()
            },
            success: function(data) {
                $("#results").html(data);
            }
        });
    });
});

It assigns an event handler to the change event of the drop down. When this is triggered it sends an ajax request to your php file (don't forget to put the correct filename for the url!) which then returns the html. This is then pushed into the results div.

Note: I fixed a typo that may or may not be in your php file. At the end of the line where you create the query, you'd missed a closing ". Just in case that was a copy and paste from the real file.

Related Topic