Dynamic HTML Form

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?

Answers


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/


Knockout can really shine when you are wanting to create complex UIs that need to dynamically change client-side. Here is a simple example of how to do what you are asking in Knockout.

Html:

 <form>
     <select name="inputSelect" data-bind="options: dataSet, optionsText: 'Name', value: selectedItem,  optionsCaption: '-- Select --'"></select>

     <input type="text" name="firstName" data-bind="value: firstName, visible: selectedItem() && selectedItem().Name == 'First Name'" /> 
     <input type="text" name="lastName" data-bind="value: lastName, visible: selectedItem() && selectedItem().Name == 'Last Name'" /> 
     <input type="text" name="age" data-bind="value: age, visible: selectedItem() && selectedItem().Name == 'Age'" /> 
</form>

JS Model:

function Model() {
   var self = this;
   self.firstName = ko.observable('Matthew');
   self.lastName = ko.observable('Cox');
   self.age = ko.observable(26);

   self.selectedItem = ko.observable();

   self.dataSet = ko.observableArray([{ Id: 0, Name:'First Name'}, { Id: 1, Name:'Last Name'}, { Id: 2, Name:'Age'}]);
}

var vm = new Model();
ko.applyBindings(vm);

JSFiddle: http://jsfiddle.net/JmpGD/1/

Explanation:

I put a visible binding on each input that checks the Name property of the selectedItem() to determine which item should be displayed.

In the jsfiddle I use a slightly different approach to handle selectedItem() being null which would cause the visible bindings to blow up when attempting to evaluate selectedItem().Name == 'something'.

You can read about how that works here

http://knockoutjs.com/documentation/with-binding.html


Need Your Help

Twitter Reverse Auth Without Requiring Local Account

ios twitter oauth

I am in need of acquiring a token for users using my app to post on their behalf. I don't want to require them to have the Twitter account registered on their phone and would like to allow them to...

Send form when hitting enter

javascript jquery html forms

I have a form in a jQuery enabled site. The form does not feature an &lt;input type="submit"&gt; button. For that reason, it's not submitted when you hit enter. What's the recommended way to emulat...