Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
General Web Standards: Best Practices for HTML forms with required fields based on a conditional
Bottom of Page1 to 4 of 4
-
I have a form where, based on the users input to one field ( a checkbox) the user must complete one of two groups of fields.
I'm looking for best practices for the implementation of this - both design and markup. I need something standards based, and any use of JavaScript needs to be unobtrusive.
I know I've seen this before, heck, I've probably done it before myself - but I'm drawing a total blank. Does anyone have any examples of this being done well. Anyone have any recommendations, suggestions, best practices? -
you could do something like this, i hope it helps
<script>
function display(formEl,obj1){
if(document.formName.formEl.checked == false){
if (document.getElementById)
{
document.getElementById(obj1).style.display = 'none';
}
else if (document.all)
{
document.all[obj1].style.display = 'none';
}
}else if(document.formName.formEl.checked == true){
if (document.getElementById)
{
document.getElementById(obj1).style.display = 'block';
}
else if (document.all)
{
document.all[obj1].style.display = 'block';
}
}
}
</script>
<form name="formName" id="formName">
<input type="checkbox" onclick="display('testChk','divid');" onchange="display('testChk','divid');" name="testChk" id="testChk" />
<div style="display:none" id="divid">
other form stuff to be displayed on click
</div>
</form>
On form submission though, you would need to check and see if that checkbox was selected or not. Because if they checked it, filled out the info, and then unchecked it. The info is still there, even though it can't be seen. -
I would do this as a multi-screen form. Let the user check the box and submit the form. Then, show them another screen stating that you need more information since they checked the box. It's all done on the server, meaning it'll work even if javascript is disabled. It also reduces the size of the forms.
-
Yeah, if you do it like varland suggests you won't have to worry about them not having javascript enabled. Or getting data you didn't expect, like by doing what I gave as an example.
1 to 4 of 4