We are currently using $('form').serialize() to get all form information
This will return any checkbox values as "On" or "Off".
Is there any way to get a 1/0 or true/false value using this same method?
Add a comment
|
5 Answers
Yes. You can do it by adding a hidden input with the same name as checkbox which value will be submitted if checkbox is unchecked:
<input type="hidden" name="option" value="false"/>
<input type="checkbox" name="option" value="true"/>
It will submit both values if checkbox is checked. But server side will read the latest one (value of checkbox)
4 Comments
Karthic Raghupathi
If you have many checkboxes, this method can get unwieldy. Here is a better approach: stackoverflow.com/a/7108685/399435
Konstantin Rudy
Absolutely disagree with you @KarthicRaghupathi. If multiline custom JS with non-transparent logic looks 'more wieldy' for you, just go for it. The original question was about binary values, not multiple. For me - two lines of html code is a much more elegant solution.
Karthic Raghupathi
the other approach is also for binary values. Only it deals with all check boxes in the form. I had to deal with 20 checkboxes in a form. Your approach means 40 input tags as opposed to few lines of JS.
Karthic Raghupathi
Some applications like EMRs/EHRs have large forms with lots of checkboxes. It may not necessarily mean bad UX.
If we have multiple checkboxed in our page like :
<input id="reminder" name="Check1" value="false" type="checkbox" />
<input id="alarm" name="Check2" value="false" type="checkbox" />
we have to bind the change event of these checkboxes and set its value to true or false.
$('input[type=checkbox]').on('change', function(){
var name = $(this).attr('name');
if($(this).is(':checked')){
$('input[name= "' +name +'"]').val(true);
$(this).val(true);
}
else{
$(this).val(false);
$('input[name= "' +name +'"]').val(false);
}
});
By default, checkbox value doesn't appear in $('form').serializeArray(), It appears when it is checked.
We have to keep one hidden field for each checkbox like :
<input type="hidden" value="false" name="Check1" />
<input type="hidden" value="false" name="Check2" />
Now when we serialize the form now, we get the correct value like : Check1=true Check2=false
Comments
The value of a form control is always a string. You can use radio buttons to get different values for the same control name:
<form ...>
<input type="radio" name="whatever" value="true">true
<br>
<input type="radio" name="whatever" value="false">false
...
</form>
Only one can be checked, and only the checked name/value will be sent to the server.
Comments
You can add a new class for check boxes and set value when clicked.
<input class="checkbox" id="someId" type="checkbox" value="false" />Checkbox
And use a small JQuery helper
$('.checkbox').click(function () {
$(this).val() == "false" ? $(this).val("true") : $(this).val("false");
});
Then you will be able to get the value of the check box or serialize a form.
