<select> ajax calls

Question

Hey,

I am using jQuery on my site and i have a update section on my project and I have three dropdowns:

• Completed?
• Hours Worked
• Who worked on this project?

I am trying to create an ajax call using jQuery to when I select it, call a $.ajax() and send the data to my php page to update my mysql database.

I am guessing I could do this:

Get the data in the select and store in a variable, and send it as data using $.ajax, but I am not sure how I would CAPTURE the value after you select and then run the ajax?

Any suggestions?

Thanks,

Ryan

Answer 1

I would use the jQuery post method.. something like:

$.post("updater.php", { completed: variableWithCompletedFromSelect } );

Just call that in the on change event on the select, and pass in the select's value. Then your php script will have $_POST['completed'] with the new value.

Answer 2

As FryGuy said the $.post method is probably your best bet although I'd lay it out like this:

$("#project select").change(function(){ // use one selector for all 3 selects
    $.post("someurl.php",{
        // data to send
        completed: $("select#completed").val(),
        hours:     $("select#hours").val(),
        who:       $("select#who").val()
    }, function(data) {
        // do callback stuff with the server response 'data' here
    });
});

This might not be exactly what you wanted if the three selects occur more than once on the page. I'd recommend reading through the jquery docs to get a handle on events. As for pulling out data you just need to use selectors and methods like .text(), .val(), .html(), .attr() etc... at the point you need them. The information you want is always in the DOM somewhere.