CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Pete
Pete

Reputation: 170

Getting HTML value of selectbox in PHP variable in the same file

My HTML code creates select options

<select name ="sortBy" id="sortBy" onchange="getValue(this)">   
    <option value=""></option>
    <option value="total">Total Medals</option>
    <option value="gold">Gold Medal</option>
    <option value="silver">Silver Medal</option>
    <option value="bronze">Bronze Medal</option>
</select>

My attempt at using Ajax to read the value from the select box

function getValue(obj){

   $("#sortBy").on( 'click', function () {
    $.ajax({
        type: 'post',
        url: 'main.php',
        data: { source1: obj.value },
        success: function( data ) {
            console.log( data );
        }
    });
});

}

My PHP code that creates a variable

$sortBy   = $_POST['source1'];
echo $sortBy;

However I get an error message saying source1 is an undefined index in the PHP code. I assume it isn't getting the variable from JS.

All of these are on the same document (main.php). I'd like the PHP variable to changed depending on the variable gotten in JS. How can I fix this? Thanks How can I fix this?

Upvotes: 0

Views: 90

Answers (2)

JoDev
JoDev

Reputation: 6873

You are confusing between fonction getValue that use param obj, and the binding .on context that use this

Use data: { source1: $( this ).val() }, instead.

And i think that getValue function is useless because ajax will be called on click event. (for <select>, you could prefer change event)

You have the choice, bind the event using attributes like onchange, or bind using jQuery. Choose one and remove the other.

See this jsFiddle, that show you the request is correctly sent. (You have to open the console to show the ajax call). If you have something wrong in your code, it's in another place.

EDIT

The error is only due to the fact that PHP for the AJAX call and HTML+jQuery code are in the same page. So loading the page prompt you the POST error because you are not in the AJAX call.And loading the page in browser will always perform a GET request (when not in form submit context of course ^^).

To prevent it just add this test in the PHP code : (this code test for XMLHttpRequest)

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    if(isset($_POST['source1'])) {
        echo $_POST['source1'];
    } else {
        echo "Something went wrong, we are in AJAX call but no data given!!";
    }
}

Upvotes: 1

Christian Pastor Cruz
Christian Pastor Cruz

Reputation: 376

Your code says: when the value of the option change, add an event listener on click to that option that do the job. This should work better:

$.ready(function({

$("#sortBy").on( 'change', function () {
$.ajax({
    type: 'post',
    url: 'main.php',
    data: { source1: $("#sortBy").val() },
    success: function( data ) {
        console.log( data );
    }
});
});

});

Upvotes: 1

Related Questions