Question

I need to make a section in my web application that has multiple forms, but only one form should be shown at a time. Those form are very similar (the difference is a select box instead of a radio button, etc.). The active form should be selected using a select box, or some kind of a tabbed menu on top. Forms are used for insert data with mysql and php. What is the most easiest way of doing this?

Answer 1

Give each form tag an id tag and then add an onchange listener to your dropdown select box. In the listener toggle the CSS display attribute of your forms.

<select name="..." id="change" onchange='OnChange(this.options[this.selectedIndex].value);'>
    <option val="form_id_1">form 1</option>
</select>

Then the javascript would be:

<script language="text/javascript">
<!--
function OnChange(form_id)
{

    document.getElementById("first_form_id").style.display = 'none';
    document.getElementById("second_form_id").style.display = 'none';
    document.getElementById("third_form_id").style.display = 'none';
    document.getElementById("fourth_form_id").style.display = 'none';

    document.getElementById(form_id).style.display = 'block';

    return true;
}
//-->
</script>

This hides all the forms at first, then shows the one you wanted to select