Submit form when checkbox is checked - tutorial

Question

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

SB24 · Accepted Answer · 2012-12-06 07:15:44Z

15

its simple...

<input type="checkbox" onclick="this.form.submit();">

answered Dec 6, 2012 at 7:15

SB24

5316 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thor Hovden Over a year ago

Just what I was looking for.

Jonathan Marshall Over a year ago

I chose this method also - it may not be quite as slick as the AJAX approach but it means that my code will still work for people with JavaScript disabled and there are no possibilities of adding a new security vulnerability on the server where the AJAX code is calling.

Jens · Accepted Answer · 2015-01-06 14:21:55Z

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
          }
      }
   });
});

Warty · Accepted Answer · 2010-03-11 02:21:26Z

0

<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...

answered Mar 11, 2010 at 2:21

Warty

7,4141 gold badge34 silver badges53 bronze badges

2 Comments

Vivin Paliath Over a year ago

But that will take him away from the page. I believe he wants to stay on the same page (he will, if he wants to check off the checkboxes one by one).

Warty Over a year ago

"a form gets submitted to the server on checking the box" =/ i assumed he meant form.submit()

Collectives™ on Stack Overflow

Submit form when checkbox is checked - tutorial

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related