asked on

How to show (or change) different htlm form fields based on a form selection

I would like to be able to change form fields based on a form field selection. For example I have this form to start:

<form name="myform" action="index.php" method="POST">
<select name="select">
<option value="1">Select One</option>
<option value="2">Select Two</option>
</select>
<select name="type">
<option value="1">Type One</option>
<option value="2">Type Two</option>
</select>

What I would like is to then show the next field (If_type_ one, or if_type_two) based on my selection of field "type" above.

<select name="if_type_one">
<option value="1">Type One Something</option>
<option value="2">Type One Something Else</option>
</select>

<select name="if_type_two">
<option value="1">Type Two Something</option>
<option value="2">Type Two Something Else</option>
</select>

Thanks......

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

you may use (without the div around the selects but setting their ID attributes):

<select name="if_type_one" id="type1">

<select name="if_type_two" id="type2">

leakim971

new test page : http://jsfiddle.net/427VR/1/

HainKurt

here is what you need I guess

<script>

function ShowOptions(n){
  document.getElementById("if_type_one").style.display=(n==1)?"":"none";
  document.getElementById("if_type_two").style.display=(n==2)?"":"none";
}
</script>
<form name="myform" action="index.php" method="POST">                    
        <select name="select">
                    <option value="1">Select One</option>
                    <option value="2">Select Two</option>
        </select>

        <select name="type" onChange="ShowOptions(this.value)">
                    <option value="1">Type One</option>
                    <option value="2">Type Two</option>
        </select>

        <select name="if_type_one" id="if_type_one" style="display:">
                    <option value="1">Type One Something</option>
                    <option value="2">Type One Something Else</option>
        </select>

        <select name="if_type_two" id="if_type_two" style="display:none">
                    <option value="1">Type Two Something</option>
                    <option value="2">Type Two Something Else</option>
        </select>

</form>

Open in new window

dmalovich

ASKER

It worked. Thank you.....