checkboxes

[TechBoyJK]

Hi Guys,

Having a problem with checkboxes.

I have fields that need true/false answers, and I'm using checkboxes for that.

If the box is checked, it's true, if it's unchecked, it's false.

The problem I am having is that if the box is already checked (the existing value is true), when I uncheck it, and then submit the form, it's still processing the value as true.

A query is run before populating the form. The query finds the existing values. I'm using CFML, but the logic should be clear. If the value in the database is false, then the box won't be checked (because the if/then statement bases whether or not the box is checked based on that value). So if the database value is false, and the box is unchecked, it doesn't check it as true. But if the value is true, and I uncheck it, it doesn't change the value to false. It's as if having the checkbox unchecked doesn't do anything. I'm wanting it to pass the value as false.


<input type="checkbox" name="my_checkbox" value="1" <cfif myquery.my_checkbox eq "1">checked</cfif>>
<span class="mediumtext">my checkbox</span>

With this code, leaving the checkbox unchecked does not pass the value as false, it simply doesn't change the existing value.

What am I doing wrong here?

 

[Ka0t1x]

Are you manually updating your database or going off of a DOM request loop?

The reason I say this is because if a checkbox is unchecked it is NOT passed to through the DOM as a form request.

For checkboxes I'll sometimes throw in hiddens so that I know the checkbox was unchecked ( hidden is there, but checkbox is not ). Or alternatively query the database.

 

[TechBoyJK]

Yes, it's being passed as a form variable. So if it's unchecked, nothing is getting passed, it's retaining it's existing value?

 

[aceO07]

I don't know what your code looks like, but (IIRC) I check everything that comes back and if there is no parameter for the checkbox I set the corresponding field to be false. If the checkbox value comes back, that means it's checked and I set the field to be true.

 

[TechBoyJK]

Ok, so I've tried doing the alternate hidden form field thing, but it's combining the values when I check the check box.

Ex.

<input type="hidden" name="example" value="0">
<input class="checkbox" type="checkbox" name="example" value="1">

If I don't check the box, I get value of '0'

If I do check the box, I get value of '0,1'

Thoughts?

 

[DaveSimmons]

They need to have different names.

Either:
Server side, have the server code treat the _lack_ of the form variable as value = false (that is, init to false, see if in form data, if present then use form value)

Client side, use the hidden value and JavaScript for the visible checkbox so that when clicked it updates the hidden value, but the visible checkbox should have a different name not the same name.

 

[TechBoyJK]

Well the problem is that this is a form that is being used to edit existing values.

So in the beginning, a query is ran to get the existing data.

Then, I declare the form variable and it's default

<cfparam name="form.example" default="#query.example#">

So what's happening is that if the existing value is 1, the checkbox gets checked by default. If it stays checked, the form value gets passed as 1.

If I uncheck it, it still stays as 1 because it uses the default value since no form value was passed.

I don't want to use Javascript if it's not necessary.

 

[LokutusofBorg]

Use a radio button and you shouldn't have these complications.

If you want to keep using checkboxes, then DaveSimmons gave you all you should need there. Your code logic has to be made to explicitly handle the situation you're describing. There's just no way around it. You have to write the code. Either on the front end, or the back end.

 

[BigDH01]

They need to have different names.

Either:
Server side, have the server code treat the _lack_ of the form variable as value = false (that is, init to false, see if in form data, if present then use form value)

Client side, use the hidden value and JavaScript for the visible checkbox so that when clicked it updates the hidden value, but the visible checkbox should have a different name not the same name.

I've only ever seen them using the same name, and then you just check for 0, 1 or 0. This is abstracted away in many frameworks, such as ASP.NET MVC, with model binders. I believe both RoR and ASP.NET MVC generate a hidden and checkbox input with the same name if you use the html helpers.