Question

I would like an HTML form that has a few fixed inputs, as well as some dynamic ones that are selected based on an a drop-down. My goals:

1. I would prefer this is entirely handled in the browser, rather than AJAX calls to fetch the dynamic “sub-form” portions that were selected by the drop-down.
2. Rather than adding a 3rd party JS library, I would like to leverage the libraries that come with ASP.NET MVC4 (jquery, knockout, etc.). However, I am willing to add a 3rd party library if the former attempt is too clumsy.

What path do you recommend? Does HTML5 have any “help” for this?

Update
It occurs to me that the HttpPost of the form should not include “sub-form” values that were not chosen in the select box. What now? Store the extra div elements in an out-of-document list and swap them in as needed? Or perhaps much better, have an event attached to the submit button that deletes the unused/invisible divs before posting?

Answer 1

Pure javascript is perfectly capable of this. jQuery will make your life a bit easier should you go that route.

Here’s an example of how to show different form options based on a dropdown value using jQuery:

<form>
    <div>Are you in school?
        <select id="in_school">
            <option selected="selected">Please choose</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
    <div id="in_school_yes" class="in_school_input" style="display: none;">
        What grade are you in?
        <input type="text" name="grade" />
    </div>
    <div id="in_school_no" class="in_school_input" style="display: none;">
        What year did you graduate?
        <input type="text" name="graduation_year" />
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

<script>
$("#in_school").change(function() {
    var in_school = $(this).val();
    $(".in_school_input").hide("fast", function() {
        $("#in_school_" + in_school).show("slow");
    });
});
</script>

Fiddle: http://jsfiddle.net/RDtVZ/