Sending a value from a dropdown box to PHP via jQuery

Question

Hey guys,

I'm trying to take values from a dropdown two boxes and send them to a PHP file which will draw an appropriate field from a mySQL database depending on the combination chosen and display it in a div without refreshing the page using AJAX. I have the second part sorted, but I'm stuck on the first part.

Here is the HTML: http://jsfiddle.net/SYrpC/

Here is my Javascript code in the head of the main document:

var mode = $('#mode');

function get() {$.post ('data.php', {name: form.him.value, the_key: #mode.val()}, 

function(output) {$('#dare').html(output).show();

});

}

My PHP (for testing purposes) is:

$the_key = $_POST['the_key'];
echo $the_key;

After I have it in PHP as a variable I can manipulate it, but I'm having trouble getting it there. Where am I going wrong? Thanks for your replies!

Answer 1

You need a callback function as well to have the server response to the POST.

$.post('ajax/test.html', function(data) { $('.result').html(data); });

This snippet will post to ajax/test.html and the anonymous function will be called upon its reply with the parameter data having the response. It then in this anonymous function sets the class with result to have the value of the server response.

Help ? Let me know and we can work through this if you need more information.

Additionally, $.post in jQuery is a short form of

$.ajax({ type: 'POST', url: url, data: data, success: success dataType: dataType });

Answer 2

your jquery selectors are wrong:

html:
<select id="mode">

jquery selector:
$("#mode").val();

html:
<select name="player">
jquery selector:
$("select[name=player]").val();

Answer 3

You want to add a callback to your ajax request, its not too hard to do, here ill even give you an example:

$.ajax({
   url: "http://stackoverflow.com/users/flair/353790.json", //Location of file
   dataType: "josn",//Type of data file holds, text,html,xml,json,jsonp
    success : function(json_data) //What to do when the request is complete
    {
        //use json_data how you wish to.;
    },
    error : function(_XMLHttpRequest,textStatus, errorThrown)
    {
        //You fail
    },
    beforeSend : function(_XMLHttpRequest)
    {
        //Real custom options here.
    }
});​

Most of the above callbacks are optional, and in your case i would do the following:

$.ajax({
   url: "data.php",
   dataType: "text",
   data : {name: ('#myform .myinput').val(),the_key: $('#mode').val()},
   success : function(value)
   {
       alert('data.php sent back: ' + value);
   }
});​

the ones you should always set are url,success and data if needed, please read The Documentation for more information.