CODEWITHSUNDEEP
javascripthtml
user3916285
user3916285

Reputation: 5

Javascript code is not working

How can I amend the code so that when I select a option from the first drop down menu the second drop down menu becomes editable otherwise the second drop-down menu should be read only, and if the option in the first drop down menu is "default" then the second drop down menu should be read only.

    <!DOCTYPE html>
<html>

<head>
<script type="text/javascript">
function mySecondFunction() {
    document.getElementById("mySelection").disabled = false;
}

</script>

</head>
<body>

<form action="">
<select name="cars" onload="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select disabled name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>

</body>
</html>

Upvotes: -1

Views: 83

Answers (8)

Jonathan
Jonathan

Reputation: 113

if you want to remove the disable in a specific value like (Saab)

See fiddle note: put the script in b4 the head tag

    function mySecondFunction()
{
 var ddl = document.getElementById("1");
 var selectedValue = ddl.options[ddl.selectedIndex].value;
    if (selectedValue == "saab")
   {
    document.getElementById("mySelection").disabled = false;
   }else {
    document.getElementById("mySelection").disabled = true;
   }
}

<form action="">
    <select id="1" name="cars" onchange="mySecondFunction()">
        <option value="default">default</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>

    <br />

    <select disabled="disabled" name="cars" id="mySelection">
        <option value="Action1">Volvo</option>
        <option value="Action2">Saab</option>
        <option value="Action3">Fiat</option>
        <option value="Action4">Audi</option>
    </select>
</form>

UPDATE See fiddle

function mySecondFunction()
{
 var ddl = document.getElementById("1");
 var selectedValue = ddl.options[ddl.selectedIndex].value;
    if (selectedValue == "default")
   {
    document.getElementById("mySelection").disabled = true;
   }else {
    document.getElementById("mySelection").disabled = false;
   }
}

Upvotes: 0

Naveen Kulkarni
Naveen Kulkarni

Reputation: 233

Change onload to onchange.

<select name="cars" onchange="mySecondFunction();">

Upvotes: 0

web-nomad
web-nomad

Reputation: 6003

Try this:

Replace

document.getElementById("mySelection").disabled = false;

with this

document.getElementById("mySelection").removeAttribute('disabled');

Also, you may want to change

onload="mySecondFunction()"

with this:

onchange="mySecondFunction()"

Hope this helps.

Upvotes: 0

Nick Russler
Nick Russler

Reputation: 4694

As others pointed out you mispelled the id of the second <select> but also you used the wrong event, onchange is what you want instead of onload.

function mySecondFunction() {
  document.getElementById('mySelection').disabled = false;    
}
<form action="">
    <select name="cars" onchange="mySecondFunction();">
        <option value="default">default</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
    
    <br />
        
    <select disabled="disabled" name="cars" id="mySelection">
        <option value="Action1">Volvo</option>
        <option value="Action2">Saab</option>
        <option value="Action3">Fiat</option>
        <option value="Action4">Audi</option>
    </select>
</form>

But consider using jQuery and attach your events in javascript instead of having them stored in html.

Upvotes: 0

Mike Sav
Mike Sav

Reputation: 15321

You have misspelled MySelection with mySelection

In the JS you have document.getElementById("MySelection") // notice the uppercase M

and in the HTML you have id="mySelection"

Also set the second select to false when the window loads and add a onChange event to the first select that will set the second event to enabled/true... it this what you want?

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

window.onload = function(){
    document.getElementById("mySelection").disabled = true;
};

function mySecondFunction() {
    document.getElementById("mySelection").disabled = false;
}

</script>

</head>
<body>

<form action="">
<select name="cars" onchange="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>

</body>
</html>

You may want to set the second select back to disabled if the user selects 'default' in the first menu after changing the value

Upvotes: 1

Ashisha Nautiyal
Ashisha Nautiyal

Reputation: 1397

You must use that inside body tag . fiddle 

<head>


</head>
<body onload="mySecondFunction()">

<form action="">
<select name="cars" >
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select disabled name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>

</body>
<script type="text/javascript">

function mySecondFunction() {
alert("aaa");
    document.getElementById("mySelection").disabled = false;
}

</script>
</html>

Upvotes: 0

gabitzish
gabitzish

Reputation: 9691

JavaScript selectors are case sensitive. Your mistake is at mySelection id: 

document.getElementById("MySelection").disabled = false;
<select disabled name="cars" id="mySelection">

Upvotes: 0

Vincent Beltman
Vincent Beltman

Reputation: 2114

Look at the capitals:

document.getElementById("MySelection").disabled = false;
<select disabled name="cars" id="mySelection">

The first is with "M" and the seccond with "m"

Upvotes: 1

Related Questions