jquery plugin to show form based on select option

Question

I have a form which includes select options with different items. Based on item selected, I need to show respective form on the same page.Does any one know jquery plugin for this or how aesthetically we can do this kind of requirement?

Answer 1

I don't know of any plugin which will do exactly that, but I imagine it should be reasonably simple to implement on your own.

You would need to use the selected option's value as some way of selecting a form. In the below example, I've assumed the value of the selected option to be the ID of the form to be shown/enabled. Other forms on the page will need to be disabled and hidden.

// for example
$(document).ready(function() {

    // set up the page, hide all forms, disable their controls
    $("form").hide()
             .find(":input")
             .attr("disabled", "disabled");

    $("#selectId").change(function() {

        // hide all forms, disabled their inputs
        $("form:not(#" + this.value + ")").hide()
                                          .find(":input")
                                          .attr("disabled", "disabled");

        // reveal the form who's ID is this selected option's value, enable all controls
        $("#" + this.value).show()
                           .find(":input")
                           .removeAttr("disabled");
    });
});

Answer 2

You don't need a plugin for this, just use jQuery itself.

$('#id_of_select').change(function() {
    // get the value of the selected option
    var val = $('#id_of_select :selected').val();

    // show the element on the page
    $('#'+ val).show();
});

Obviously if you have more than one element, and only one can be shown at any given time, you'll want to have some logic in there to handle the show/hide of the non-selected elements. But that should point you in the right direction.