POSTing an Indeterminate Checkbox Value

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


There is a such thing as an indeterminate checkbox value. It’s a checkbox (<input type=”checkbox”>) that isn’t checked. Nor is it not checked. It’s indeterminate.

We can even select a checkbox in that state and style it with CSS!
Some curious points though:

It’s only possible to set via JavaScript. There is no HTML attribute or value for it.
It doesn’t POST (or GET or whatever else) or have a value. It’s like being unchecked.

So, say you had a form like this:
<form action=”” method=”POST” id=”form”>

<input name=”name” type=”text” value=”Chris” />

<input name=”vegetarian” type=”checkbox” class=”veg”>

<input type=”submit” value=”Submit”>

</form>
And, for whatever reason, you make that checkbox indeterminate:
let veg = document.querySelector(“.veg”);
veg.indeterminate = true;
If you serialize that form and take a look at what will POST, you’ll get “name=Chris”. No value for the checkbox. Conversely, had you checked the checkbox in the HTML and didn’t touch it in JavaScript, you’d get “name=Chris&vegetarian=on”.
Apparently, this is by design. Checkboxes are meant to be boolean, and the indeterminate value is just an aesthetic thing meant to indicate that visual “child” checkboxes are in a mixed state (some checked, some not). That’s fine. Can’t change it now without serious breakage of websites.
But say you really need to know on the server if a checkbox is in that indeterminate state. The only way I can think of is to have a buddy hidden input that you keep in sync.
<input name=”vegetarian” type=”checkbox” class=”veg”>
<input name=”vegetarian-value” type=”hidden” class=”veg-value”>
let veg = document.querySelector(“.veg”);
let veg_value = document.querySelector(“.veg-value”);
veg.indeterminate = true;
veg_value.value = “indeterminate”;
I’ve set the indeterminate value of one input and I’ve set another hidden input value to “indeterminate”, which I can POST. Serialized means it looks like “name=Chris&vegetarian-value=indeterminate”. Good enough.
See the Pen Can you POST an intermediate value? by Chris Coyier (@chriscoyier) on CodePen.
The post POSTing an Indeterminate Checkbox Value appeared first on CSS-Tricks.
Source: CssTricks

Posted on October 12, 2018 in css, Design, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Support, Expert Drupal Development, html, javascript, The, Web Design Services

Share the Story

Back to Top