JQuery-Get value from select option to use in PHP query

Question

I would like to generate a query that contains the value selected from a drop down menu. he value would be saved into a PHP variable on change without clicking a submit button. After looking at various articles, I still am not sure what I should do. I would appreciate your help. Thanks!

Drop Down Menu

<select name="attribute_select" id="attribute_select">
   <option value="select-type">-- Select --</option>
   <option value="joint_list">Joint</option>
   <option value="collection_list">Collection</option> 
   <option value="panel_list">Panel</option> 
   <option value="wood_list">Wood</option>
</select>

PHP

$tablename = value selected from drop down menu

Query

$panel_query = mysqli_query($con,"
        SELECT *
        FROM $tablename
");

sounds like you are trying to change something on the page based on what the select gets changed to. look at some examples of ajax and php. — Danny
– Danny, Commented Jul 16, 2013 at 19:48

MajorCaiger · Accepted Answer · 2013-07-18 14:51:09Z

2

You're best bet is to look at jQuery. You can create an onchange JavaScript event that will grab the value of the select option and send it via AJAX to a PHP script which can then run the query and return the result.

jQuery

$('select').on('change', function(){
    $.ajax({
        url: 'your/php/script.php'
        type: 'POST',
        dataType: 'json',
        data: {
            'selected' : $(this).val()
        },
        success: function(data){
            // Loop through your results in jQuery and modify your HTML elements
            $.each(data, function(key, value) {
                // Do something with each row of your results
            });
        }
    });
});

PHP

$tablename = $_POST['selected'];

Run query here...

header('Content-type: application/json');
die( json_encode( $yourQueryResults ) );

Edited to show a possible solution

edited Jul 18, 2013 at 14:51

answered Jul 16, 2013 at 19:50

MajorCaiger

1,9231 gold badge12 silver badges18 bronze badges

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

3 Comments

izharbuen Over a year ago

Can the PHP script be on the same page as the AJAX?

MajorCaiger Over a year ago

What exactly are you trying to achieve with this? There may be a much better solution

izharbuen Over a year ago

I'm looking for a way to generate the rows of several tables in my database that have similar fields. The selection in the drop menu would determine from which table to select the rows.

tymeJV · Accepted Answer · 2013-07-16 19:47:06Z

You'll have to use a change event as well as an AJAX call to send the value back to the server-side:

$("#attribute_select").change(function() {
    //get the selected value
    var selectedValue = this.value;

    //make the ajax call
    $.ajax({
        url: 'yourPHPfile.php',
        type: 'POST',
        data: {option : selectedValue},
        success: function() {
            console.log("Data sent!");
        }
    });
});

And in your PHP, catch the value with:

$tablename = $_POST['option'];

You'll have to tweak this a bit to suit your needs, but it covers the basics.

What do I place in the url if I want to use the PHP value in the same page as the script?

Ohgodwhy · Accepted Answer · 2013-07-16 19:47:43Z

0

jQuery's .change()

$('select').on('change', function(){
    $.ajax({
        url: '/'
        type: 'POST',
        data: {'selected' : $(this).val()},
        success: function(data){
            console.log(data); // do something with what is returned
        }
    });
});

php

<?php
if(isset($_['selected'])):
    //create query using variable
endif;

answered Jul 16, 2013 at 19:47

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

Collectives™ on Stack Overflow

JQuery-Get value from select option to use in PHP query

3 Answers 3

3 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Related