Checkbox returning two values

Question

I am currently using javascript to generate HTML for checkboxes however when I go to post the form to my controller which accepts FormCollection as a parameter.

I then put these values into a dictionary and inspect the value within my dictionary. While other checkboxes only return one value, my autoDiscovery checkbox returns two which are 'on' and 'true', which doesn't make sense to me.

Here is the rendered HTML

<div class="form-group">
    <div class="col-md-10">
        <label class="col-md-3 control-label" for="autoDiscovery">
            <input id="autoDiscovery" type="checkbox" checked="" data-val="false" name="autoDiscovery">
            <input type="hidden" name="autoDiscovery" value="true"> Auto Discovery
        </label>
    </div>
</div>

and here is the javascript I am using to assign the checkboxes

function AssignCheckbox(variableName, jsonData, caption) {
var checked = jsonData == 1 ? 'checked' : '';
var value = jsonData == 1 ? 'true' : 'false';    
    return divFormGroupOpening + divOpeningInput +
            '<label class="col-md-3 control-label" for="' + variableName + '">' + '<input id="' + variableName + '" type="checkbox" name="' + variableName + '"  data-val="false"' + checked + '>' +
            '<input type="hidden" value="' + value + '" name="' + variableName + '">' +
            ' ' +  caption +'</label></div></div>';
        }

Your check box does not have a value attribute - it needs to be value="True" and the hidden input needs to be value="False" — user3559349
– user3559349, Commented Jul 2, 2015 at 9:37

Ahmad · Accepted Answer · 2015-07-02 09:39:50Z

2

You have two inputs with the same exact name property. Ofcourse you would expect two values

<input id="' + variableName + '" name="' + variableName + '"  '>'
<input type="hidden" name="' + variableName + '">'

answered Jul 2, 2015 at 9:39

Ahmad

12.8k7 gold badges53 silver badges98 bronze badges

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

1 Comment

Johnathon64 Over a year ago

The thing is, why do my other checkboxes not return two values? I am using the exact same code to generate my HTML the only difference is the others are false where as autoDiscovery is true.

user3559349 · Accepted Answer · 2015-07-02 09:43:18Z

1

Inspect the html generated when you use the @Html.CheckBoxFor() method. It generates

<input type="checkbox" name="autoDiscovery" value="true" ..... />
<input type="hidden" name="autoDiscovery" value="false" />

You need to mimic that. Currently your checkbox element does not have a value attribute so if its checked in the view it will post back "on". And your hidden input value is "true" so that value posts as well.

Just as important, do not use FormCollection. Post back to a model, or add a parameter in the method - bool autoDiscovery so the DefaultModelBinder will correctly set the value to either true or false depending on the checked state of the checkbox

answered Jul 2, 2015 at 9:43

user3559349

4 Comments

Johnathon64 Over a year ago

So should the hidden input type always be false then?

user3559349 Over a year ago

Yes it should be "false" and the checkbox value should be "true". This is by design. An unchecked checkbox does not post anything so in the controller you get false. But a checked checkbox does post back, so the values sent are autoDiscovery=true&autoDiscovery=false But the DefaultModelBinder reads only the first value (true) and ignores the second value.

Johnathon64 Over a year ago

I changed my value for the input field to false, and now the checkbox is true. However it is still posting two values true and false

user3559349 Over a year ago

You need to read my last comment. All form controls (that are not disabled) post back their values. The DefaultModelBinder will take care of binding the property correctly (in MVC you should never need to use FormCollection) - just include bool autoDiscovery a a parameter in your POST method and test it with both the checkbox checked and unchecked - it will be correctly bound. If you insist on using FormCollection then you need to parse the values yourself.

Collectives™ on Stack Overflow

Checkbox returning two values

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related