jquery submit form with checkbox

Question

So I want to submit only when a checkbox is checked (I want to do something else when a checkbox is unchecked). I've been trying to get this checkbox submit to work but not no avail. Here's what I have:

$('#checkbox').click(function() { if ($(this).attr('checked')) { $("#form").submit(function () { var newvals = $("#form").serialize(); // serialize data $.post('save.php', newvals, function(data) { $("#content").html(data); }); // posting data and dumping response onto page return false; }); } else { alert(2); // placeholder for what i want to do otherwise } });

I looked around and was poking around with .trigger and .live, but I'm having problems even thinking about how the logic would even work with those functions. I'm not opposed to using them as long as I can distinguish between a 'checked' box and an 'unchecked' box.

Any ideas?

Your code looks correct to me. Can you give details of what's not working, or what you want to accomplish? — Bojangles
– Bojangles, Commented Aug 27, 2011 at 23:22
yea. basically, on a check: take user entries, clear fields and post data. on uncheck: repopulate fields with posted data to show what user entered. the first step to doing all this was figuring out how to post data. i know the logic is working, but for some reason i can't find my posted array. — yoshi
– yoshi, Commented Aug 27, 2011 at 23:38

ShankarSangoli · Accepted Answer · 2011-08-28 01:13:37Z

In your code you are attaching the form submit event handler everytime you check the checkbox. It is not going to trigger the submit event and do what you are expecting.

You should attached the submit event handler outside the click event handler of checkbox and trigger the submit event of form when checkbox is checked. Try this

$function(){ $("#form").submit(function () { var newvals = $("#form").serialize(); // serialize data $.post('save.php',newvals,function(data) { $("#content").html(data); }); // posting data and dumping response onto page return false; }); $('#checkbox').click(function() { if(this.checked) {//Just this.checked will say whether its checked or not //Now trigger the form submit event $("#form").trigger('submit'); } else{ alert(2); // placeholder for what i want to do otherwise //I think you want to erase the textboxes. //You can find all the input elements and set there value to empty $("#form input").val(''); } }); });

yo this worked! hiyo!! ive been spinning my wheels all day. thx!

Philip Schweiger · Accepted Answer · 2011-08-27 23:27:44Z

Turn the logic inside-out - attach a handler to the form submission and, in there, check to see if your input is checked. I might do something like this:

$(function(){ $('form').submit(function(e){ e.preventDefault(); if ($('#checkbox').is(':checked')) { alert('submit'); } else { alert('do not submit'); } }); });

(you'll of course need to change the css selectors to match your markup, but hopefully this shows the logic you need).
maybe i need to share more inforamtion: on check: i want to submit and erase textboxes of the submitter on uncheck: i want to show the user what they input into textboxes

Collectives™ on Stack Overflow

jquery submit form with checkbox

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related