Displaying a form according to the selected value from dropdown list

Question

There are two forms to be filled in my program. I just want to display each form after selecting a value form dropdown list. I tried many times but couldn't succeed. I'm not much of a programming person. also i need the value selected from the dropdown list to be remain even after reloading the page.So if anyone can help me to solve this using php,javascript or jquery i'll be greatful.

Answer 1

Some of your code would be helpful. But maybe this will point you in the right direction (this uses jQuery):

<select name="formType" id="formType">
    <option value="Type A">Type A</option>
    <option value="Type B">Type B</option>
</select>
...
<form id="formA">
    ...
</form>
<form id="formB">
    ...
</form>

<script type="text/javascript">
$(function() {//on document load
    $('#formA').hide();
    $('#formB').hide();
    $('#formType').change(function(){
        showForm($(this).val());
    });

});

function showForm(myFormType){
    if(myFormType == 'Type A'){
        $('#formA').show();
    }
    else{
        $('#formB').show();
    }
}
</script>

Answer 2

The solution depends on whether you want to have both forms on the page and the one showing will change based on the selection or if you want to have the page reload showing the correct form.

The first solution is straightforward Javascript (and jQuery in this case):

$(document).ready(function () {
    $('.group').hide();
    $('#option1').show();
    $('#selectMe').change(function () {
        $('.group').hide();
        $('#'+$(this).val()).show();
    })
});

See http://jsfiddle.net/eYzSb/ for a full example.

The second solution could be done with Ajax or PHP and I will update this answer later.

Answer 3

<select>
<option value="" selected="selected"></option>
<option value="form_1">Form 1</option>
<option value="form_2">Form 2</option>
<option value="form_3">Form 3</option>
</select>

<form name="form_1" id="form_1" style="display:none">
<input type="text" value="1">
</form>

<form name="form_2" id="form_2" style="display:none">
<input type="text" value="2">
</form>

<form name="form_3" id="form_3" style="display:none">
<input type="text" value="3">
</form>

JS:

$("select").on("change", function() {    
    $("#" + $(this).val()).show().siblings().hide();
});

demo