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
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
Share Improve this question edited Dec 4, 2013 at 18:28 Charles 51.4k13 gold badges106 silver badges144 bronze badges asked Dec 4, 2013 at 4:46 R RR R 2,9562 gold badges26 silver badges43 bronze badges5 Answers
Reset to default 3option 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>
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
Few browsers lack in support of onclick event of option tag. Here is the reference
so you can go for onchange of select tag.
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/amarprabhu/9C3VU/
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