Question

I have to quickly make a form that has optional menus depending on the value of other fields. I couldn’t find anything in plain HTML on that. Is that possible to do with only HTML?

Answer 1

Plain HTML probably isn’t up to the task (unless there are new dynamic features in HTML5 with which I am unaware, which is entirely possible). But with JavaScript (especially when using jQuery), it’s pretty trivial to show/hide/change form elements and page sections dynamically based on the state of the form.

What you would do is attach event listeners to the form elements which drive the dynamic content, and those listeners would show/hide/change page elements accordingly. You can take a look at a contrived example here:

HTML:

<div id="firstSection">
    <select id="selectSomething">
        <option>Select...</option>
        <option>One</option>
        <option>Two</option>
    </select>
</div>
<div id="optionalSection">
    <select id="selectSomethingElse">
        <option>Select...</option>
        <option>Three</option>
        <option>Four</option>
    </select>
</div>

CSS:

#optionalSection
{
    display: none;
}

JavaScript:

$('#selectSomething').change(function() {
    if ($('#selectSomething').val() == 'Two') {
        $('#optionalSection').show();
    } else {
        $('#optionalSection').hide();
    }
});

Essentially the second section is conditionally displayed depending on what’s currently selected in the first section.

Note that, from the server’s perspective, all of the form elements would still post their values. This method doesn’t prevent the second section from being included in the form, only from being shown to the user. When handling the form results on the server-side you’d still want to re-validate the business logic accordingly. (Never assume valid content from a user.)