Best practice for sending AJAX data via form - retrieving value back

Question

I have a small form where I want the values to be updated on change for my select boxes which can be done with:

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

But I have a input text field, where a user can enter the amount of hours, when they click out of the box THEN send that AJAX request to a PHP page.

And the #completed field is now a checkbox, does that pass the same was as an input? How would that work with jQuery, so if you check or uncheck send that info and update database

The thing I have been trying to research now is what is the best way to retrieve those values from the server and update them on the page using AJAX. So once i update my dropdown, it will keep that same result.

Any ideas?

Thanks,

Ryan

Answer 1

And the #completed field is now a checkbox, does that pass the same was as an input?

No. A checkbox's .value (as used by jQuery's val() method) is always the string in the value="..." attribute (defaulting to “on” if omitted), regardless of whether it is ticked or not. To get the effective value of a checkbox you need to look at the ‘.checked’ property. eg.

var v= element.checked? element.value : '';

Also, you can't use an onchange handler to detect when a checkbox is changed, as IE doesn't fire that event. Instead, you have to use onclick for that element.