Javascript function problem

[maverick5x]

hello all,

 

i have a table row with the display:none style set

<TR id='bankrow' name='bankrow' style='display:none;'>

 

i have a <select> component and a javascript code

<select id='paidthrough' name='paidthrough' onChange="javascript:evaluate();">

<script language="javascript">
function evaluate()
{
alert("Hello");
var val = document.getElementById("paidthrough").options[document.getElementById("paidthrough").selectedIndex].value
if(val == 2)
{
	document.getElementById("bankrow").style.display = "block";	}
else
{
	document.getElementById("bankrow").style.display = "none";
}
}
</script>

 

The idea is when an item index 2 is selected the table row "bankrow" should be  shown.

This code works on IE but not on firefox. The alert("Hello") does not show in firefox when the item is selected.

 

What can be the problem here?

 

Thanks in advance?

[fenway]

A few general comments: remove the javascript: from js event handlers (which should be lowercase); don't get the page element twice, and better yet, pass "this" to the evaluate function, and you'll get that form element "for free".

[janroald]

Try onselect instead. Obviously, your function never runs at all in FF. Your event handler isn't "handling" :-) Dont ask me why.

 

<tr id='bankrow' name='bankrow' style='display:none;'>

 

<select id='paidthrough' name='paidthrough' onselect="evaluate(this.value);">

 

<script language="javascript">
function evaluate(val) {
alert("Hello");
if(val == 2) { 
          document.getElementById("bankrow").style.display = "block";	
        }
        // else {
        //  document.getElementById("bankrow").style.display = "none";
//}
}
</script>

[ozfred]

hello all,

 

i have a table row with the display:none style set

[...]
	document.getElementById("bankrow").style.display = "block";
[...]

 

The default value of the display attribute for TR elements in CSS2 compliant browsers is "table-row".  IE is not compliant, so it uses 'block'.  Toggle your row's display attribut between 'none' and '' (empty string). That will allow it to return to its default, be it 'block' or 'table-row' or whatever.

 

Some other tips:

 

Store references in a local varaible and re-use them, that way you only get them once and significantly reduce the amount of code and its execution time (though you may not notice the time difference, your users may well appreciate the faster download times).

 

Abbreviate the display function to:

 

function evaluate()
{
  var sel = document.getElementById("paidthrough");
  var val = sel.options[sel.selectedIndex].value;
  var bankrow = document.getElementById("bankrow");
  bankrow.style.display = (2 == val)? '' : 'none';
}

 

Even better is if you change the onchange code to:

 

<select id='paidthrough' name='paidthrough' onchange="evaluate(this);">

 

Your 'evaluate' function becomes:

 

function evaluate(sel)
{
  var val = sel.options[sel.selectedIndex].value;
  var bankrow = document.getElementById("bankrow");
  bankrow.style.display = (2 == val)? '' : 'none';
}

 

--

Fred

Javascript FAQ: <URL: www.jibbering.com/faq/ >