HTML Input Checkbox return 'On' instead of 'True' when submitting form

Question

I have a MVC3 app using Project Awesome (http://awesome.codeplex.com/), but I am getting a weird behaviour on checkboxes. I have the following simple Html within a Modal popup <input type="checkbox" class="check-box" name="IsDeleted">

When I submit the form containing this element, its post value is 'on' instead of the expected 'true' (when element is checked).

Does anybody know why this is? I am assuming there may be some javascript somewhere messing with the form data, but wanted to check whether there isn't some HTML I am missing.

Thanks

I had this when I was using e.target.value, when it should be e.target.checked hope this helps someone. — fungusanthrax
– fungusanthrax, Commented May 3, 2017 at 21:35

Niklas · Accepted Answer · 2011-06-22 14:34:44Z

81

Set the checkboxes value attribute to true and you will get true in your post value.

answered Jun 22, 2011 at 14:34

Niklas

30k5 gold badges54 silver badges74 bronze badges

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

4 Comments

Miguel Over a year ago

This is true if and only if the user checks the box. If not checked nothing gets posted. Also, MVC's binding mechanism will set the value to null if nothing gets posted for that checkbox.

BriOnH Over a year ago

ie: <label><input type="checkbox" id="SomeID" name="SomeName" onclick="CBSelectedValueToTrue(this);" >Weight</label>......function CBSelectedValueToTrue(cb) { if (cb.checked) { cb.value = "true"; } }

Wouter Vanherck Over a year ago

Doing this will return true, but never a false value?

Yuniac Over a year ago

It will not return false. If checked, it will return true otherwise, no value.

mkilmanas · Accepted Answer · 2011-06-22 14:35:15Z

It's browser specific, I suppose, what to send when value is undefined. You need to defined value attribute on your radios/checkboxes to be sure what will be passed back to you. I would suggest value="1"

Otto Kanellis · Accepted Answer · 2014-02-26 10:13:34Z

9

set data-val="true" and value="true" by deafult... if checkbox is checked then returns true

answered Feb 26, 2014 at 10:13

Otto Kanellis

3,7281 gold badge26 silver badges24 bronze badges

Comments

Siddhartha · Accepted Answer · 2019-02-27 18:32:16Z

Check Checkbox is checked or not if checked set Hidden field true else set hidden field false.

$('#hiddenFieldId').val($('#CheckBoxId').attr('checked')=='checked')

Okeke Divine · Accepted Answer · 2024-04-27 08:08:35Z

13yrs later. Incase if someone is still having this problem. When validating it use e.target.checked instead of e.target.value. Works everytime!!

Michael Wright · Accepted Answer · 2011-06-22 14:35:55Z

1

Surely you should just check if it is set - the value that it sends across is irrelevant, if it's not checked, then nothing at all gets sent when you POST.

answered Jun 22, 2011 at 14:35

Michael Wright

5912 silver badges2 bronze badges

1 Comment

sferencik Over a year ago

Is that specified in W3C? I thought this was browser-dependent.

Riyaz Hameed · Accepted Answer · 2023-02-05 23:37:19Z

Nothing worked! I ended up on a hacky way after seeing the serialised form object just before posting to controller/action. Its not safe in case if anyone would have any textboxes inside that may contain ampersands. In my case, i had an array of checkboxes, so I did this hack after I am very sure, i won't have problems.

var formData = $("#form").serialize(); formData = formData.replaceAll('=on&','=true&'); if (formData.endsWith('=on')) { formData = formData.substring(0, formData.length - 3) + "=true"; }

Hope it helps to those 'someone' with my scenario. Happy hacking.

geniusvale · Accepted Answer · 2023-10-17 17:39:42Z

if you do this :

const checkbox = document.getElementById("myCheckbox"); console.log(checkbox.value);

you will get the output on instead of true or false

then change to :

const checkbox = document.getElementById("myCheckbox"); console.log(checkbox.checked);

it will print a boolean value.

sergzach · Accepted Answer · 2011-06-22 14:57:30Z

Use jQuery for cross-browser decision. And it will return true or false anyway.

$('#check-box-id').attr('checked' ) == true

if your checkbox has an id check-box-id. For your current version use the next (select by class name):

$('.check-box').attr('checked' ) == true

josliber · Accepted Answer · 2015-06-09 20:45:56Z

-2

Use jQuery

var out=$('.check-box').is('checked')

If checkbox is checked out=true else out=false

edited Jun 9, 2015 at 20:45

josliber

44.4k12 gold badges103 silver badges136 bronze badges

answered Jun 9, 2015 at 20:37

Venkat

6032 gold badges8 silver badges17 bronze badges

Comments

Trang Tran Thi My · Accepted Answer · 2016-06-28 04:38:58Z

In HTML, add a input type="hidden" above checkbox:

<input name="active" id="activeVal" type="hidden"> <input id="active" type="checkbox">

Then, add a script as below:

$('#activeVal').val($('#active').is(':checked')); $('#active').change(function() { $('#activeVal').val($('#active').is(':checked')); });

When you do eg. $('#your-form').serialize() in jQuery, you will get value of checkbox when checked active: true or uncheck active: false

Collectives™ on Stack Overflow

HTML Input Checkbox return 'On' instead of 'True' when submitting form

11 Answers 11

4 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Hot Network Questions