I have a form with a dropdown showing 1 through 10. If user chooses 1-9, then a specific secondary paragraph field should show. And if the user chooses 10, then a different paragraph field should show.
I figured out some javascript for showing the second form fields (likely isn't the most elegant way to do it so suggestions welcome). Then I used livevalidation code so that if the user doesn't make any selection (dropdown choice stays on Choose One instead of 1-10), then a error will appear under the dropdown field instead of the form submitting.
Now I'd like to take it a step further and require the secondary field that shows but make the field that gets hidden not be required. So if 1 -9 is chosen, the second field shows AND will be the only field required. But if 10 is chosen, then its specific second field will show and be the only required field.
I tried a couple of things, but couldn't get the form to submit b/c I think the hidden field was still being required.
Here's my JS for determining the dropdown and showing the second field:
<script type="text/javascript">
function selectionChanged()
{
if(document.getElementById("field0").value == "blank")
{
document.getElementById("formElement1").style.display="none";
document.getElementById("formElement2").style.display="none";
}
else if(document.getElementById("field0").value == "10")
{
document.getElementById("formElement1").style.display="none";
document.getElementById("formElement2").style.display="inline";
}
else
{
document.getElementById("formElement1").style.display="inline";
document.getElementById("formElement2").style.display="none";
}
return true;
}
</script>
And here's the code for the livevalidation to show error if dropdown choice is not made and is left on Choose One:
<script type="text/javascript" >var field0 = new LiveValidation('field0', {onlyOnSubmit: true });
field0.add( Validate.Exclusion, { within: [ 'blank' ], failureMessage: 'Please make a selection' } );</script>
Hope that makes sense and someone can help. Thanks!
