Fetch db data depending on selected drop down value

Question

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';
?>

Reinstate Monica Cellio · Accepted Answer · 2013-07-17 17:01:16Z

4

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.

answered Jul 17, 2013 at 17:01

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Nikhil Mohan Over a year ago

Also try to use mysqli instead of mysql functions.

Reinstate Monica Cellio Over a year ago

@NikhilMohan - that's up to the OP. I'm just trying to answer the question that has been asked :)

Nikhil Mohan Over a year ago

It's ok. Your answer is perfect. I'm just trying to give a suggestion :)

Reinstate Monica Cellio Over a year ago

@NikhilMohan I hope he appreciates it - I'm no php expert at all!! Thanks :)

user2579439 Over a year ago

@Archer thanks for the code, it seems to work but im getting an error - Parse error: syntax error, unexpected 'auto' (T_STRING), expecting ',' or ';' in C:\xampp\htdocs\XXX\retrieve.php on line 26; think i have some code error in my retrieve.php file.

|

Jasmin Mistry · Accepted Answer · 2013-07-17 17:03:10Z

0

You have to implement ajax call to php file with ea_name as post parameter file. and place response to specific div.

answered Jul 17, 2013 at 17:03

Jasmin Mistry

1,4861 gold badge19 silver badges25 bronze badges

Collectives™ on Stack Overflow

Fetch db data depending on selected drop down value

2 Answers 2

15 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related