Run a PHP script on the same page after selecting a dropdown using Ajax or JavaScript

Question

Run a PHP script on the same page after selecting a dropdown using Ajax or JavaScript

I am creating a MySQL query that will be executed when the user selects options from more drop-down lists.

I want that when choosing a drop-down list, the request associated with this option should be executed automatically using ajax / javascript on the same page. Since I have both html and php codes on the same page.

I used to use the form submission options for the drop-down list, but since the number of drop-down options is more than five to filter the result, so the queries have become difficult to implement. Therefore, I want to clarify the result of each drop-down list individually.

Any help is appreciated. Thanks in advance!

My HTML for dropdown:

<p>
<label for="experience">Experience :</label>
<select id="experience" name="experience">
    <option value="" selected="selected">All</option>
    <option value="Fresher">Fresher</option>
    <option value="Experienced">Experienced</option>
</select>
</p>

PHP code to execute related queries:

<?php
if (isset($_GET['exp'])) {

    switch ($_GET['exp']) {

        case 'Experienced':
        $query = "SELECT job_seekers.ID, job_seekers.Name, job_seekers.Skills, job_seekers.Experience FROM job_seekers where job_seekers.Experience!='Fresher'";
        break;

    case 'Fresher':
        $query = "SELECT job_seekers.ID, job_seekers.Name, job_seekers.Skills, job_seekers.Experience FROM job_seekers where job_seekers.Experience='Fresher'";
        break;

    default:
        $query = "SELECT job_seekers.ID, job_seekers.Name, job_seekers.Skills, job_seekers.Experience FROM job_seekers";

    }
}
$result = mysql_query($query) or die(mysql_error());

echo "<ul class=\"candidates\">";

while($row = mysql_fetch_row($result))
{
    echo "<li>";
    echo "<p> <b>ID:</b> <u>$row[0]</u> </p>";
    echo "<p> <b>Name :</b> $row[1] </p>";
    echo "<p> <b>Key Skills:</b> $row[2] </p>";
        echo "<p> <b>Experience:</b> $row[3] </p>";
    echo "</li>";
}

    echo "</ul>";               

?>

+1

javascript html ajax php mysql

Yogesh rawal Aug 31 '12 at 7:18

source share

3 answers

Mic1780 · Answer 1 · 2012-08-31T07:29:36+0000

If you want AJAX to call the php script, you must specify the $ .ajax provided by Jquery

http://api.jquery.com

so you can use it like this:

$.ajax({
    url: 'ajax.php',
    data: {
        //put parameters here such as which dropdown you are using
    },
    success: function(response) {
        //javascript and jquery code to edit your lists goes in here.
        //use response to refer to what was echoed in your PHP 
    }
});

This way you will have dynamic dropdowns and refined results that you want

the saad arshad · Answer 2 · 2012-08-31T07:40:43+0000

You cannot re-execute part of PHP on the same page. Rather, use an Ajax request to complete the action.

Mansoorkhan Cherupuzha · Answer 3 · 2012-08-31T09:17:17+0000

<?php
if (isset($_GET['experience'])) {

    echo $_GET['experience'];
        /* do mysql operations and echo the result here */
    exit;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
function myFunction(value)
{
    if(value!="All")
    {
        $.ajax(
        {
            type: "GET",
            url: '<?php echo $_SERVER['PHP_SELF']; ?>',
            data: { experience: value},
            success: function(data) {
                $('#resultDiv').html(data);
        }
    });
    }
    else
    {
        $('#resultDiv').html("Please select a value.");
    }
}
</script>
</head>

<body>
<p>
<label for="experience">Experience :</label>
<select id="experience" name="experience" onChange="myFunction(this.value)">
    <option value="All" selected="selected">All</option>
    <option value="Fresher">Fresher</option>
    <option value="Experienced">Experienced</option>
</select>
</p>
<div id="resultDiv">
Please select a value.
</div>
</body>
</html>

Run a PHP script on the same page after selecting a dropdown using Ajax or JavaScript

More articles: