javascript code works in mozilla and chrome but not in IE

Question

My script code:

function trigonchange(){
    select_id =$("#trig_method").value;

    if(select_id  == "script") {
        $("#one").css("visibilty","visible");
        $("#a").css("visibilty","visible");
        $("#three").css("visibilty","visible");
        $("#threea").css("visibilty","visible");
        $("#threeb").css("visibilty","visible");
        $("#two").css("visibilty","hidden");
        $("#four").css("visibilty","hidden");
    }
    else {
        $('#two').css("visibility","visible");
        $('#four').css("visibilty","visible");
        $('#one').css("visibilty","hidden");
        $('#a').css("visibilty","hidden");
        $('#three').css("visibilty","hidden");
        $('#threea').css("visibilty","hidden");
        $('#threeb').css("visibilty","hidden");
    }
}

HTML

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function) {
    $("#trig_method").change(trigonchange());
}
</script>

</head>
<body>
<form action="test_management.cgi" name="input" onsubmit="return(validatefrm());" style="margin-left:0%;"  method="POST" enctype="multipart/form-data">
<table cellspacing="10">
<tr><td>Test Case Name</td><td><input type="text" name="tc_id" size="40"></td></tr>
<tr></tr>
<tr></tr><tr></tr>
<tr><td>Category</td><td><select name="category" id="cat">
<option val="server">server</option>
<option val="network">network</option>
<option val="storage">storage</option>
</select></td></tr>
<tr></tr><tr></tr>
<tr></tr><tr></tr>
<tr><td>Sub-Category</td><td><select name="itemdata" id="item">
</select></td></tr>
<tr></tr><tr></tr><tr></tr>
<tr><td>Trigger Method</td><td>
<select name="trig_method" id="trig_method" onchange="trigonchange();this.selectedIndex=this.defaultIndex;" onfocus="this.defaultIndex=this.selectedIndex;">
<option value="cmd">CMD</option>
<option value="script">SCRIPT</option>
</select></td></tr><tr></tr><tr></tr>
<tr id="two">
<td style="width:40%;">Enter the command </td>
<td>
<input class="mg" type="text" size="40" name="cmd">
</td>
</tr>
<tr id="one" style="visibility: hidden;"><td style="width:40%;">Specify a script path</td><td>
<input type="file" id= "script" name="script" size="40"></td></tr>
<tr id="a" style="visibility: hidden;"><td>OR</td></tr>
<tr id="t" style="visibility: hidden;"><td style="width:40%;"> Specify the UNIX path</td><td><input type="text" id="script" size="40"/></td></tr>
<tr id="four"><td style="width:40%;">Please specify the exepected output in case of CMD</td>
<td><textarea name="cmd_verification" cols="30" rows="5" id="ta" ></textarea>
<tr id="three" style="visibility: hidden;"><td style="width:40%;">Specify the Config File </td>
<td><input type="file" siz="40"></td></tr><tr id="threea" style="visibility:hidden;"><td>OR</td></tr>
<tr id="threeb" style="visibility:hidden;"><td style="width:40%;">Specify the Config file unix path</td><td><input type="text" size="40" class="mg"/></td></tr>
<tr></tr><tr><td>Testcase Description</td><td><textarea name="test_description" cols="30" rows="5"></textarea></td></tr><tr></tr><tr></tr>
<tr><td></td><td><input type="submit" id="b" value="Submit"></td></tr>
</table></form>
</body>

I want to display/hide fields onchanging the dropdown(CMD/SCRIPT). Its working perfectly on Mozilla and Chrome but not in IE. I have added all of you suggestion and edited the code. But still its not working in (now it's not working in any browser)

What version of IE? It might not like numeric IDs, try changing them to begin with a letter. — Barmar
– Barmar, Commented Jan 21, 2014 at 6:28
Maybe browsers treat differently multiple inline onchanges for the same element. Actually this shouldn't work properly in any browser. — Teemu
– Teemu, Commented Jan 21, 2014 at 6:30
A side advice, don't use numeric values as Ids, even thought it might work in some browsers.Beside, how do u trigger the action? — Mohammed Joraid
– Mohammed Joraid, Commented Jan 21, 2014 at 6:33

Barmar · Accepted Answer · 2014-01-21 06:32:50Z

2

You can't use the same attribute twice in an element. If you want to do multiple things in onchange, put them in a single attribute, separated by ;.

<select name="trig_method" id="trig_method" onchange="trigonchange();this.selectedIndex=this.defaultIndex;" onfocus="this.defaultIndex=this.selectedIndex;">

answered Jan 21, 2014 at 6:32

Barmar

788k57 gold badges554 silver badges668 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Schien · Accepted Answer · 2014-01-21 06:35:01Z

0

Use "value" instead of "Val" in options. Compare with the value in options. That is cmd instead of CMD.

answered Jan 21, 2014 at 6:35

Schien

3,9231 gold badge20 silver badges29 bronze badges

2 Comments

user3217945 Over a year ago

1)changed id names 2)onchange also combined together 3)changed val ti value and comapared cmd with script. still it didnt work :(

Schien Over a year ago

Hi could you edit your answer to reflect the changes I suggested? I tested on IE6 and 7 and the code works. Make sure you write <option value="cmd">CMD</option>, and in the switch, write case "cmd". All lower case. Thanks.

QNeville · Accepted Answer · 2014-01-21 12:01:13Z

It might be worth noting that onChange doesn't play well with IE 7/8. jQuery is a good workaround.

jQuery method:

$("#trig_method").change(trigonchange());

Reference: http://api.jquery.com/change/

EDIT:

If you're going jQuery, make sure jQuery is added to your project (here's the quick and easy CDN method — insert in head tag):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Then add

$("#trig_method").change(trigonchange());

somewhere below your HTML element that you are targeting. If you want it above the element, you'll need to wrap that function with a $(document.ready()) like:

$(document).ready(function) {
    $("#trig_method").change(trigonchange());
}

But your real problem was solved first by Barmar, so I'd mark his as the correct answer.

After several tries, changing this line:

<select name="trig_method" id="trig_method" onchange="trigonchange();...

to

<select name="trig_method" id="trig_method" onchange="trigonchange();this.selectedIndex=this.defaultIndex;" onfocus="this.defaultIndex=this.selectedIndex;">

as Barmar suggested works .

You can't have two onChanges called in the same tag. Not sure if you intended to have both happen as a consequence of an onChange or not, but that is exactly what was causing the problem.

As for IE9+, your revised code should work. If you want to support IE7/8, use jQuery as I've described to call the change rather than having onChange in the tag.

like this??$("#trig_method").change(trigonchange() { select_id =$("#trig_method").value; if(select_id == "script") { $("#one").css("visibilty","visible"); $("#a").css("visibilty","visible"); }); this is not working as well :(
Not quite. Please see my edit. Barmar has the right answer, as his fix worked first try in IE10.

Collectives™ on Stack Overflow

javascript code works in mozilla and chrome but not in IE

3 Answers 3

Comments

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Related