Submit form when checkbox is checked - tutorial

Question

Hi,

I'm trying to achieve an effect similar to 37signals' ta-da list - I want my users to be able to check off items from a list just by checking a "done" box - in other words a form gets submitted to the server on checking the box. Does anyone know of a tutorial which covers something like this, or could point me in the right direction?

Thanks Rob

Answer 1

If I understand your question correctly:

You could accomplish this using jQuery and AJAX. In the first example I'm doing it without submitting the whole form, and only submitting the value of the checkbox:

jQuery("#myCheckbox").click(function() {
   var $checkbox = jQuery(this);
   var checkboxData = "checkboxvalue=" + $checkbox.val();

   jQuery.ajax({
      url: "http://some.url.here",
      type: "POST",
      data: checkboxData,
      cache: false,
      dataType: "json",
      success: function(data) {
          if(data["success"]) {
            //do some other stuff if you have to
            //this is based on the assumption that you're sending back
            //JSON data that has a success property defined
          }
      }
});

Presumably you'd have something on the server-side that handles the post.

If you actually DO want to submit a form, you can do the same thing as above, except you'd serialize the form data:

jQuery("#myCheckbox").click(function() {
   var formData = jQuery("#formID").serialize();

   jQuery.ajax({
      url: "http://some.url.here",
      type: "POST",
      data: formData,
      cache: false,
      dataType: "json",
      success: function(data) {
          if(data["success"]) {
            //do some other stuff if you have to
            //this is based on the assumption that you're sending back
            //JSON data that has a success property defined
          }
      }
});

Answer 2

<input type="checkbox" onclick="yourForm.submit()">
The above will submit the form when your checkbox is clicked... idk if thats what you want.
So it'll do the default form submit process...