PDA

View Full Version : CSS Onclick works on IE Safari Chrome BUT NOT on Firefox!!!


isk015
February 13th, 2010, 10:06 AM
hi all, i am getting crazy here because this code bellow works fine in every major browser but not on Firefox.

What I am trying to do is really simple, when I click on a link I want to call a javascript function and pass the value of a field to that function. I tried several combinations and nothing. Here's the test code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Click Here</title>

<script type="text/javascript">

function ftest(vars){
alert(vars);
}

</script>
</head>
<body>
<a href="javascript: ftest('field2.value')">Click Here</a> <br />
<br />
<input name="field1" id="field2" type="text" />
</body>
</html>
actionAction
February 13th, 2010, 02:39 PM
For starters: field2.value is not a string, it is a property access of an object; therefore you should remove the quotes around it. Secondly: this is improper code, if it is working in any browser it is because that browser is being way too forgiving. To access a DOM element by id, you need to use the function:


var formElement = document.getElementById('field2');
alert(formElement.value);

You can access form elements directly by using one of the following:


//forms are numbered from top down in source code assuming it is the first form arrived at
alert(document.forms[0].field1.value);
//or assuming you have given your form tag a name attribute
alert(document.formName.field1.value);


You could maybe get away with accessing a form element with a name attribute (not the id) of field1 this way, though it would still be poorly coded. Last and least important, this should be in an onclick handler, not in the href

To clarify:


<a href="#" onclick="ftest(document.getElementById('field2').value)">Click Here</a> <br /> <br />

or


<a href="#" onclick="ftest(document.forms[0].field1.value)">Click Here</a> <br /> <br />
NeoDreamer
February 17th, 2010, 06:33 PM
Isn't this the most cross-browser compatible onclick for an anchor?



<a href="javascript:void(0)" onclick="func(); return false">click here</a>



some people put # for the HREF. That will make you jump to the top of the page if your func() runs into an error. Setting HREF to javascript:void(0) will gracefully do nothing
I retrun false on my onclick, because SOMETIMES the page gets reloaded in IE if you don't return false. I have yet to pinpoint the conditions that trigger this in IE.
a tadster
February 17th, 2010, 07:49 PM
Actually, imo, the best way to do it is without the onclick event:


<a href="javascript: function(...)">click</a>

reason being is, not all users will have a mouse, and therefore not all users will be able to "click" the link, however if the anchor is selected in some way, it will still execute the javascript.
actionAction
February 18th, 2010, 12:50 AM
I wouldn't say that putting javascript in an href is more cross-browser compatible than onclick, onclick has been around since version 2 browsers. Neither is the "best" way to do things (though I like tadsters point). Ideally, you would separate logic from presentation and not use inline javascript. NeoDreamer is correct about returning false, this will prevent the default event from firing.

To give the "best" advice (that I can think of):


<html>
<head>
<script type="text/javascript">
window.onload = function(){
var link = document.getElementById('link_id');
link.onclick = function(e){
alert('clicked!');
return false;
}
}
</script>
</head>
<body>
<a href="some_noscript_page.html" id="link_id">Click Here</a> <br /> <br />
</body>
</html>


I wish you could use setAttribute() but IE is the suck.
jwilliam
February 18th, 2010, 11:31 AM
Inline javascript makes me cringe, as do inline styles. HTML, Javascript and CSS (IMHO) should be kept separate. It's hard enough to keep a designer from changing the id's on tags for no particular reason... I'd rather keep my Javascript code in my own file :) Of course, there are more reasons to follow this practice, but that's a whole 'nother discussion.
icio
February 18th, 2010, 02:43 PM
tadster's point is invalid: the `onclick' fires when you select it (via TAB, if you're not using a mouse) and press ENTER.

I'd say there isn't much difference to which approach that you would use. Certainly it is nicer if you can include all of the necessary actions in the `href' attribute of the anchor, but that means that you can't reference the anchor's effective `onclick' function.

Edit: (Noticed after running script below) Perhaps more importantly note that the first anchor's JavaScript here doesn't work because you can't reference the `this' object. I would say that's a pretty strong argument for using `onclick'.

For example,

<html>
<head>
<script type="text/javascript">
function test()
{
var a1 = document.getElementsByName("firstAnchor")[0];
var a2 = document.getElementsByName("secondAnchor")[0];

alert(a1.onclick);
alert(a1.href);
alert(a2.onclick);
alert(a2.href);
}
</script>
</head>
<body>
<a href="javascript: alert('clicked '+this.name); void(0);" name="firstAnchor">Ancher One</a>
<a href="javascript: void(0);" onclick="alert('clicked '+this.name); return false;" name="secondAnchor">Ancher Two</a>

<button onclick="test();">Test</button>
</body>
</html>

My vote is for `onclick'.
actionAction
February 18th, 2010, 03:43 PM
Calling javascript from within an href is no different than running javascript directly in the address bar, you are in global scope ('this' refers to the window object). Good rebuttal to tadsters point, icio. In addition, using the href tag for javascript rather than a fallback html link alienates users with javascript disabled (even though they may or may not be overly paranoid). If inline is imperative, onclick; otherwise use code blocks/external files to manage actions.



<html>
<head>
<script type="text/javascript">
window.name = "Captain Window";

function a(obj){
alert(obj);
}
</script>
</head>
<body>
<a href="javascript:a(this.name);" name="firstAnchor">Ancher One</a>
<a href="javascript: void(0);" onclick="a(this.name); return false;" name="secondAnchor">Ancher Two</a>
</body>
</html>
a tadster
February 18th, 2010, 06:39 PM
the `onclick' fires when you select it (via TAB, if you're not using a mouse) and press ENTER.


I did not realize that, you know, there are some validaters that will tell you not to use the onclick event for the reason i gave, that's where i was getting that from... like the one available for firefox...
icio
February 19th, 2010, 04:19 AM
In addition, using the href tag for javascript rather than a fallback html link alienates users with javascript disabled (even though they may or may not be overly paranoid).
Another good point for using `onclick'. :thumb: