CODEWITHSUNDEEP
javascriptphphtmlgoogle-chrome
R R
R R

Reputation: 2956

Onclick event firing in Firefox and IE but not in Chrome

I have the following javascript function.

<script type="text/javascript">
function showhidefields(value,formobj,epsflag,respflag) {
  //alert(epsflag);
  if (epsflag==0 && respflag==4) {
    document.getElementById("tpnr").style.position = "static";
    document.getElementById("tpnr").style.top = "0px";
    formobj.tussenPersoonNotext.disabled =false;
    formobj.email.disabled =true;                  
  }
</script>

<select name="moduleidval" class="validate['required']">
   <option value="">-- Selecteer Proces--</option>
   <option onclick="showhidefields(this.value,this.form,'<?php echo 1; ?>');" 
   value="<?php echo $epsmodules; ?>"><?php echo 'MBO'; ?></option>
</select>

My problem is when i click on the option in case of firefox or IE the onclick event fires but in case of chrome it doesnot fire at all.i tried changing the function name also but no luck.

fiddle

thanks in Advance

Upvotes: 3

Views: 8943

Answers (5)

amarprabhu
amarprabhu

Reputation: 350

You can pass the value directly in the function specified, like:

<select onchange="trig(value);">

This value can then be used in the trig function.

function trig(val) {
    //do foo
    alert(val);
}

Short and simple.

A working demo in Chrome: http://jsfiddle.net/amarprabhu/9C3VU/

Upvotes: 1

Kishan Reddy
Kishan Reddy

Reputation: 137

option elements don't fire the click event in all browsers, you should stray away from relying on this. Instead you can use onchange() event for select. You may use something like this

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

   function changeFunc() {
    var selectBox = document.getElementById("selectBox");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    alert(selectedValue);
   }

  </script>
 </head>
 <body>
  <select id="selectBox" onchange="changeFunc();">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>`enter code here`
  </select>
 </body>`enter code here`
</html>

In Your case you use like

<form id='myForm' action="#">
  <select id='mySelect' name="moduleidval" class="validate['required']" onchange="showhidefields(this.value,this.form,'0');">
   <option value="-">-- Selecteer Proces--</option>
   <option value="1"> 'Klantprocessen'</option>
</select>
</form>

Upvotes: 3

Frank Fang
Frank Fang

Reputation: 2162

Sure, there is no click event on an option tag.

You may listen to the onchange event of the select tag.

 <!-- HTML -->
<form id='myForm' action="#">
    <select id='mySelect' name="moduleidval" class="validate['required']">
      <option value="-">-- Selecteer Proces--</option>
      <option value="MBO">MBO</option>
    </select>
</form>

// JavaScript
document.getElementById('mySelect').onchange = function(){
    alert('value:'+this.value); 
    alert('form id:' + this.form.id);
}

See Demo here

Upvotes: 3

Ayyappan Sekar
Ayyappan Sekar

Reputation: 11475

Few browsers lack in support of onclick event of option tag. Here is the reference enter image description here

so you can go for onchange of select tag.

Upvotes: 1

Sadiq
Sadiq

Reputation: 1

Check javascript is enabled in ur chrome. 

Select Customize and control Google Chrome to the right of the address bar

From the drop-down menu, select Settings

At the bottom of the page, click Show advanced settings…

Under Privacy, click the Content settings… button

Under the JavaScript heading, select the Allow all sites to run JavaScript radio button

Upvotes: -3

Related Questions