Jump to content

Disable Dropdown menu


LearningKid

Recommended Posts

hey can anyone show me how to make 2 radio with 2 dropdown menu so if u select one radio button u will get to select one dropdown and if u select the other u get the other dropdown. however if u change one drop down and decide to choose the other one when u click the other one the 1st one resets so u dont get 2 values sent.

 

Hlp Plz

Link to comment
https://forums.phpfreaks.com/topic/192142-disable-dropdown-menu/
Share on other sites

You don't necessarily need to reset a select list if the user chooses to use the other list. Any fieds that are disabled do not post their values. So, you could do something as simple as this:

 

<html>
<head>
<script type="text/javascript">

    function chooseSelect(selectOption)
    {
        document.getElementById('select1').disabled = (selectOption!=1);
        document.getElementById('select2').disabled = (selectOption!=2);
    }
</script>
</head>
<body>

<form action="" method="post">
Select 1 (Letters) <input type="radio" name="selectOpt" value="1" onclick="chooseSelect(this.value);" /><br />
Select 2 (Numbers) <input type="radio" name="selectOpt" value="2" onclick="chooseSelect(this.value);" /><br />
<select name="select1" id="select1" disabled="disabled">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select><br />
<select name="select2" id="select2" disabled="disabled">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br />
<br />
<button type="submit">Submit</button>
</form>
</body>
</html>

 

However, if you want to reset the unselected list for aesthetic reasons, I would do this:

<html>
<head>
<script type="text/javascript">

    function chooseSelect(selectOption)
    {
        select1Obj = document.getElementById('select1');
        select2Obj = document.getElementById('select2');
	select1Obj.disabled = (selectOption!=1);
        select1Obj.selectedIndex = (selectOption!=1) ? 0 : select1Obj.selectedIndex;
        select2Obj.disabled = (selectOption!=2);
        select2Obj.selectedIndex = (selectOption!=2) ? 0 : select2Obj.selectedIndex;
}
</script>
</head>
<body>

<form action="" method="post">
Select 1 (Letters) <input type="radio" name="selectOpt" value="1" onclick="chooseSelect(this.value);" /><br />
Select 2 (Numbers) <input type="radio" name="selectOpt" value="2" onclick="chooseSelect(this.value);" /><br />
<select name="select1" id="select1" disabled="disabled">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select><br />
<select name="select2" id="select2" disabled="disabled">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br />
<br />
<button type="submit">Submit</button>
</form>
</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.