Question

I’m trying to build some functionality for a project, but I’m stuck with this:

I want to grab the value from a select box option, and use it in my php script

The thing is, I need to grab the currently selected option without the user having to post the data. So I suspect there is a little bit of ajax required here, which I am completely new to.

I’ll give you an example to make things clearer:

        <select>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Belarus">Belarus</option>
        <option value="Albania">Albania</option>
        </select>

• User is presented with a select box

• User chooses ‘Belarus’ from the drop-down

• I need to be able to take the value ‘Belarus’ and assign it to a variable in php

I have no idea how to do this without them submitting the form.

Any help will be much appreciated

Thanks

Answer 1

To send data to your PHP script using AJAX:

$('select').on('change', function () {
    var val = $(this).val();
    if (val != '') {
        $.get('path/to/script.php', {'select-name' : val}, function (serverResponse) {
            //this is the callback for this AJAX request, the server has handled the request and anything output by your PHP script will be available in the `serverResponse` variable
        });
    }
});

Note that .on() is new in jQuery 1.7 and is the same as .bind() in this case.