HTML & Javascript - Show / Hide Form with Dropdown List or Radio

Question

Good morning all, I've the following HTML form:

<table border="0">
<tr align="center">
<td colspan="2"><b>title</b></td>
</tr>
<tr><td><br></td></tr>
<tr>
<td>Test:</td><td><input type="text" name="test" size="25"></td>
</tr>
<tr>
<td>Name :</td><td><input type="text" name="name" size="25"></td>
</tr>
<tr>
<td align="left">Tipo de Linha :</td>
<td> <select name="linha" size="1">
<option value="0" selected="selected">Escolhe uma das opções...</option>
<option class="1" value="1">1</option>
<option class="2" value="2">2</option>
<option class="3" value="3">3</option>
<option class="4" value="4">4</option> </select> </td>
</tr>
</tr>
</table>

And what i really need is:

In the top of page, i need to choose one of that options (1, 2, 3 or 4) and if i choose the number 1 it will show me some form question if i choose number 2, others form questions and so on..

The options list / menu can be radio or dropdown or whatever.

Sorry my english. =\\

Thnx in advance!

Answer 1

Use buttons:

<button onclick="form1()">1</button>
<button onclick="form2()">2</button>
<button onclick="form3()">3</button>
<button onclick="form4()">4</button>

<script>
function form1() {
// put here code to show form1
}
function form2() {
// put here code to show form2
}
function form3() {
// put here code to show form3
}
function form4() {
// put here code to show form4
}
</script>

Answer 2

In short with jQuery solution:

$(document).on("change",'select[name=linha]',function() {
    var val= $('option:selected', this).val();
    $(".q_set").hide();
    $("#questions"+val).show();
});

you have a sets of questions already on the page, but hidden. When user selects an option, jQuery gets it's value and showing set of questions accordingly by id, ie qustions1, qustions2, qustions3, qustions4

All, your questions sets have class q_set and this line $(".q_set").hide(); ensures that they all hidden before displaying specific question set - $("#questions"+val).show();

Answer 3

Firstly, It is a very wrong practice to use tables to align your forms. You can read more about it here , here and here .

Secondly, i think the way to do it would be to keep your options in seperate divs with ID's like option1, option2, option3 and so on.. Based on what is the selection in the select box, you can hide and unhide the specific divs

$("#options-select").change(function(){
    console.log("option changed");

    var optionSelected = $(this).attr("value");
    $(".optionDivs").hide();
    $("#optionDiv" + optionSelected).show();

});

The idea is that when the anything in the drop down is selected, all the option divs are hidden, and the one with the value obtained from the selected box is displayed.

Here is a JSfiddle that illustrates the same