CODEWITHSUNDEEP
javascriptjqueryhtml
Ameer Ahmed
Ameer Ahmed

Reputation: 144

onchange="" doesn't work in select tag

I have two tags of select. Their IDs is "study-phase" and "study-year". I want when the value of study phase to process a CSS code.

HTML:

<select name="study-phase" onchange="myFunction()" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>   
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>
<style type="text/css">
    #a , #b , #c , #d , #f , #g , #h , #j , #k , #e , #i {
        display: none;
    }
</style>

JS:

$(function(myFunction()){
   if (document.getElementById("study-phase").value == "pri") {
       document.getElementById("a").style.display = "block";
   }
});

And after run the code the css code which I want don't launch. What's the problem here ?

Upvotes: 1

Views: 4635

Answers (8)

maikelm
maikelm

Reputation: 403

I guess what you want is that when you select the value pri in the first select the second take the value aa. As you use jquery I'll give you an example. 

 $( document ).ready(function() {
  $("#study-phase").change(function(){
  if($(this).val() === "pri")
    {
       $("#study-year").val("aa");
    }
  });
})

https://codepen.io/anon/pen/VWLaqv

Upvotes: 0

Bibhudatta Sahoo
Bibhudatta Sahoo

Reputation: 4904

To done this jquery will be more efficient so you just need to do some thing like this:-

1.Remove onchange="myFunction()" form your select

2.Add this code on your script:-

 $('#study-phase').on('change',function(){
 if ($(this).val() == "pri") {
    $("#a")css('display','block');
 }});

It will work fine

Upvotes: 0

Brad
Brad

Reputation: 8698

You need to define the function before calling it,

For example, in the first select (example 1) im calling a function that isn't defined yet and nothing happens (see console for error)

in the second select (example 2) i define it first then call it.

This makes for a messy html layout with random scripts in it, so instead, you can use jquery to listen for the event (example 3).

$('.myselect').change(function(){})

Examples: https://jsfiddle.net/hbmrktbj/

Upvotes: 0

Shivam Tiwari
Shivam Tiwari

Reputation: 355

HTML

<select name="study-phase" onchange="myFunction()" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>
<style type="text/css">
  #a,
  #b,
  #c,
  #d,
  #f,
  #g,
  #h,
  #j,
  #k,
  #e,
  #i {
    display: none;
  }
</style>

JS:

function myFunction(){
     console.log("myFunction gets called");
    if (document.getElementById("study-phase").value == "pri") {
        document.getElementById("a").style.display = "block";
    }}

Just declare your function like this. And add a console.log to make sure that function is getting called "onchange" or not, which is after this change.

Upvotes: 2

reinierkors
reinierkors

Reputation: 510

You can do something like this instead:

$(document).ready(function() {
  $("#study-phase").on("change", function() {
    if (document.getElementById("study-phase").value === "pri") {
      $('option#a').show();
    }
  });
});
#a,
#b,
#c,
#d,
#f,
#g,
#h,
#j,
#k,
#e,
#i {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="study-phase" id="study-phase" class="sp-input">
  <option value=""></option>
  <option id="pri" value="pri">Primary</option>
  <option id="pre" value="pre">Prep</option>
  <option id="sec" value="sec">Secondary</option>
</select>
<select name="study-year" id="study-year" class="sp-input">
  <option value=""></option>
  <option id="a" value="aa">Grade 1</option>
  <option id="b" value="">Grade 2</option>
  <option id="c" value="">Grade 3</option>
  <option id="d" value="">Grade 4</option>
  <option id="e" value="">Grade 5</option>
  <option id="f" value="">Grade 6</option>
  <option id="g" value="">Grade 7</option>
  <option id="h" value="">Grade 8</option>
  <option id="i" value="">Grade 9</option>
  <option id="j" value="">Grade 10</option>
</select>

Upvotes: 0

asdf_enel_hak
asdf_enel_hak

Reputation: 7650

$(function(myFunction()){
    if (document.getElementById("study-phase").value == "pri") {
        document.getElementById("a").style.display = "block";
    }});

give error 

Uncaught SyntaxError: Unexpected token (

apart if you revised your code as below it works, as it is vanillaJs you dont need jquery

function myFunction() {
  if (document.getElementById("study-phase").value == "pri") {
    document.getElementById("a").style.display = "block";
  }
};
<select name="study-phase" onchange="myFunction()" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>
<style type="text/css">
  #a,
  #b,
  #c,
  #d,
  #f,
  #g,
  #h,
  #j,
  #k,
  #e,
  #i {
    display: none;
  }
</style>

Upvotes: 2

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

Your JavaScript isn't valid.

Moreover, I think you want to one of the option in the second dropdown once you make change in the first.

You can build on this logic further

Here is a sample minimal code:

function myFunction() {

  if (document.getElementById("study-phase").value == "pri")
    document.getElementById("study-year").value = "aa";
};
<select name="study-phase" onchange="myFunction()" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>

Upvotes: 0

Zenoo
Zenoo

Reputation: 12880

Try using the .change() event :

HTML

<select name="study-phase" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>   
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>

JS

 $(function(){
   $('#study-phase').change(function(){
     if ($("#study-phase").val() == "pri") {
        $("#a").css('display','block');
     }
   });

 });

Upvotes: 0

Related Questions