CODEWITHSUNDEEP
javascriptgoogle-chromeinternet-exploreronchange
Jason Fung
Jason Fung

Reputation: 69

JavaScript onChange not firing in IE

I'm trying to get a javascript to run when a dropdown list is changed to specific value, it all works fine in Chrome, but IE just refuses to fire the "onChange" function.

Here is my dropdown list code:

<select name="typeTenancy" onchange='TenancyCheck(this.value);' required>
  <option value=""></option>                                                
  <option value="1">1 - Option 1</option>   
  <option value="2">2 - Option 2</option>   
  <option value="3">3 - Option 3</option>
  <option value="4">4 - Option 4</option>
  <option value="5">5 - Option 5</option>                                                           
</select>

Here is Javascript i'd like it to run when option 4 is picked:

function TenancyCheck(val){
    var element=document.getElementById('tenancyDuration');
    if(val=='4')
    blockReqTenancy();
    else  
    displayTenancy();
}

function blockReqTenancy() {
    document.getElementById("tenancyDuration").style="display:block";
    document.getElementById("tenancyDuration").required=true;
}

function displayTenancy() {
    document.getElementById("tenancyDuration").style="display:none";
    document.getElementById("tenancyDuration").required=false;
}

It essentially reveals an input field when option 4 is selected, but nothing is shown when using Internet Explorer 11.

I have also checked and I've placed the script src within the Body of my HTML code.

If anyone can explain why this is happening and point me in the right direction to resolve this, it would be much appreciated.

Upvotes: 0

Views: 1268

Answers (1)

MMRahman
MMRahman

Reputation: 319

when you saying getElementById , your don't have id called "tenancyDuration". You may Add it.

For IE Change your Function a little bit. like style.display="block"; and use setAttribute function

Full Code

<select name="typeTenancy" id ="tenancyDuration" onchange='TenancyCheck(this.value);' required>
 <option value=""></option>                                                
 <option value="1">1 - Option 1</option>   
 <option value="2">2 - Option 2</option>   
 <option value="3">3 - Option 3</option>
 <option value="4">4 - Option 4</option>
 <option value="5">5 - Option 5</option>                                                           
</select>

<script>
function TenancyCheck(val){
  var element=document.getElementById('tenancyDuration');
  if(val=='4')
   blockReqTenancy();
  else  
   displayTenancy();
}

function blockReqTenancy() {
document.getElementById("tenancyDuration").style.display="block";
document.getElementById("tenancyDuration").setAttribute("required", true); 
}

function displayTenancy() {
 document.getElementById("tenancyDuration").style.display="none";
 document.getElementById("tenancyDuration").setAttribute("required", false); 
}
</script>

Upvotes: 1

Related Questions