Using a hidden radio buttons
Consider this example where you want to verify the user clicked the "Terms and Conditions" link. You could right an "onclick" function that sets a global javascript variable, but using a hidden radio button allows you to not pollute your global variables and allows you to pass the information along in your form.
Note: The CSS for this approach can be used any time you do not want users to actually see a radio button.
You may ask yourself "Why not just use display:none; or visibility:hidden;? The answer: Cross-Browser Compatibility. Internet Explorer ignores inputs that use either of those styles. In both cases, the "label" will merely be "text" and will not actually select the radio button.
Go ahead and check out the four different scenarios - Click "Continue" -
- without reading the terms or agreeing to them
- after agreeing to the terms, but don't read them yet
- after read the terms, but disagreeing with them
- after reading the terms and agreeing to them
The way this works, is that the "Terms and Conditions" link is actually a span on the label for the hidden radio button with name="trmsLink". To make the radio button "hidden", we position it off the page by applying the attribute class="hideThis" to the input.
The "Continue" button runs the function "Submit" which looks at both conditions:
- Did they click the link for the Terms and Conditions
- Did they agree to the Terms and Conditions
For this demo, the Submit function merely "alerts" the four different conditions. In practice, you could make this submit your form.