HTML objects not visible to JavaScript in Firefox 6 - javascript

Is there any reason why I'm not able to see object values from JavaScript using Firefox, but IE and Chrome see them without problem?
For example:
<div>
<input type="text" id="clientID" />
<input type="submit" id="search" value="Submit" class="submitButton" />
</div>
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
$("#searchDisputes").click(function () {
if(clientID.value.toString() != "") {
//do something
}
}
}
</script>
Firefox tells me that clientID does not exist, however IE and Chrome work just fine.
I am able to access it using jQuery $("#clientID"), but before changing a good bit of code around, I would like to understand why this doesn't work in Firefox, but works ok in other browsers.

You are assuming that giving an element an id will create a global variable with the same name as the id containing a reference to the element. There is no reason browsers should do this.

Related

Missing DOM element

I am using Chrome 30.0.1599.101 and have issue with name element: it has no properties.
<html>
<body>
<form>
<input name="name" id="name" type="text">*<br>
<input name="pass" id="pass" type="text">*<br>
</form>
<script>
var name = document.getElementById("name");
var pass = document.getElementById("pass");
console.log(name); // no properties
console.log(pass); // everything ok
</script>
</body>
</html>
Why has name element has no properties? It's not only the console issue - the properties are not accessible in the code. However, everything works fine in Firefox browser. Even in the fiddle (by Gurpreet Singh) with the very same code in the same browser everything works. I tried <!DOCTYPE html5> as Uooo suggests, tried to reset the browser, but still no luck on localhost.
Here is a screenshot:
If I change the name name to something else, the properties are visible.
name is already a global property (a property of window), and not only that, it is kinda typed (String).
var name = ... is essentially the same as as saying window.name = .... Use another variable name that is actually not taken yet and you should be fine.
Missing <head> and <title>, maybe that helps, it's invalid HTML without them.
jsfiddle does automatically insert those tags, which could explain why it works there but not locally.
Don't get confused by Green arrow answer,
you don't close an input tag, but not the br and vice versa. All single-tags in XHTML need to be closed to be valid, but in HTML4 and HTML5 you don't close any single-tag at all.
I would suggest following changed version which works as intended for me in
navigator.userAgent
"Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1678.0 Safari/537.36"
Code
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script>
document.addEventListener('readystatechange', function(event) {
if (event.target.readyState !== "complete") {
return;
}
var name = document.getElementById("name");
var pass = document.getElementById("pass");
console.log(name);
console.log(pass);
}, false);
</script>
</head><body>
<form>
<input name="name" id="name" type="text">*<br>
<input name="pass" id="pass" type="text">*<br>
</form>
</body></html>
Explanation
script elements should be in the head element of a HTML document.
script code dealing with the DOM needs to run after the document is fully loaded.
Implicitly Fixed Issues
script code should not run in global scope where var name and pass may clash with existing variables. It now runs in the scope of the anonymous event listener function.
Remaining Problems
Use type="password" for password fields.
Use the value attribute to default input type values.
Better use div elements to layout input elements vertically instead of br elements.
I don't know if that cause the error but you should at least close your input
<html>
<body>
<form>
<input name="name" id="name" type="text"/>*<br>
<input name="pass" id="pass" type="text"/>*<br>
</form>
</body>
</html>
The fiddle works for me too...
Do you have any warnings &/or errors in your chrome console ?
You should also used your script in that function :
<script>
$(function() { //shortcut for document ready
//Get your elements here otherwise you can't be sure that dom is loaded.
});
</script>
if you don't use jquery then it's quite a mission to detect when dom is loaded if you want a Xbrowser solution, a lot of topic are talking about that.

Javascript setAttribute in IE9

So I'm trying to make a table hidden when the webpage opens but when a is clicked it should show but I'm having problems with IE9. I read that IE8 and below do not support setAttribute and my webpage seems to work correctly with Firefox. Here is the code, just wondering if anyone could help me out:
<h1 onclick="myFunction()">Show Sitemap</h1>
<table id="myInput" style="visibility:hidden;" width="100%" height="50%">
<tr><td><p>Test</p></td></tr>
</table>
<script>
function myFunction()
{
document.getElementById("myInput").setAttribute("style","visibility:visible;");
};
</script>
Try using
function myFunction()
{
document.getElementById("myInput").style.visibility = "visible";
};
instead, as IE is more compatible with this.
Fiddle:http://jsfiddle.net/E396D/
I tried this in IE10 with compatibility mode on and it worked (the original didn't).

JavaScript doesn't work in Mozilla Firefox

I wrote the following code:
<form name=f>
<input type=button value="Button1" onclick=b1click()>
<input type=button value="Buttone2" onclick=b2click()>
<script language=javascript>
function b1click()
{
f.action="Login.jsp";
f.submit();
}
function b2click()
{
f.action="Logout.jsp";
f.submit();
}
</script>
</form>
This works code properly in Internet Explorer but the action does not work in Mozilla Firefox 3.6.2. How to solve this problem? Please any one help me.
I know this will sound snide, but the truth of the matter is: it's not 1995 anymore.
That code would have worked great a decade ago, but standards and specifications have changed significantly since then.
Lets start from the top:
<form name=f>
All html attribute values should be enclosed in quotes. For consistency sake, use double quotes: <form name="f"> is much better.
<input type="button" value="Button1" onclick="b1click()">
Avoid inline-script events. If the functionality ever changes, or you want to remove a function, you'll have to go through every page and adjust the function. A better way is to give the button an ID, and add the onclick event via scripts:
HTML:
<input type="button" value="Button1" id="button1">
JS:
document.getElementById('button1').onclick = b1click;
Now the script's turn:
<script language=javascript>
You should use the type attribute with a valid MIME type. Additionally, whenever possible, move your scripts to an external script file. When that's not possible, make sure to either XML encode your script, or encase it in CDATA tags:
<script type="text/javascript" src="path/to/script.js"></script>
OR
<script type="text/javascript">
/* <![CDATA[ */
... some code ...
/* ]]> */
</script>
Finally the real issue with your script.
The f property you're referencing is a member of the document, and not the window. I believe IE will put the reference on both, but it's just not safe to rely on either behavior.
Give the form an ID: <form id="f">, and get the element from the b[12]click functions
function b1click()
{
var f = document.getElementById('f');
f.action = 'Login.jsp';
f.submit();
}
First off, change that name="foo" to id="foo". Names are mostly used within the form itself.
Now, try to reference your form using document.formID, not just formID. formID is a variable, which is undefined, but document.formID is the actual form element:
function b1click()
{
document.f.action="Login.jsp";
document.f.submit();
}
function b2click()
{
document.f.action="Logout.jsp";
document.f.submit();
}
Give form an id and refer to it using:
var form = document.getElementById('formId');
You should quote the input attributes, or any attributes for that matter. And your script does not belong AFTER the form, e.g. in body, but rather in the HEAD element.
This works in IE, Firefox and Chrome.
<html>
<head>
<script language="javascript">
function b1click()
{
f.action="Login.jsp"; // better is document.f., but f. appears to work as well
f.submit();
}
function b2click()
{
f.action="Logout.jsp";
f.submit();
}
</script>
</head>
<body>
<form name="f">
<input type="button" value="Button1" onclick="b1click()">
<input type="button" value="Buttone2" onclick="b2click()">
</form>
</body>
</html>
There are a couple ways to reference your form.
If you define your form as <form name="Login" id="LoginFrom"></form>,
Method 1
If your form is the only one in the page, you can use:
document.forms[0].action = 'Login.jsp';
Method 2
If your form is not the only one form in the page, you can use the form name to reference the form, such as
document.Login.action = 'Login.asp';
Method 3
The form can also be referenced with DOM function getElementByID.
document.getElementByID('LoginForm').action = 'Login.asp'

How to refresh 2 iframes with one link/button using html/js

I'm new here and like to know how to refresh 2 different iframes on one page.
I found something on google using getElemenById. But it has to work in firefox and firefox has some problems with Id's.
thanks in advance.
<form action="managecartform.html" onclick="deleteAllCookies();"><button type="submit" >Empty cart</button></form>
What does your form have to do with iframes?
Do you mean this? Load the managecartform into one frame and reload the other?
<form action="managecartform.html" target="iframe1"
onsubmit="deleteAllCookies(); window.frames[0].location.reload(1);">
<input type="submit" value="Empty cart"/>
</form>
<iframe name="iframe0"></iframe>
<iframe name="iframe1"></iframe>
firefox doesn't have problems with ids -- 99% of the time it's because you've either got a missing id or you've duplicated an id.
ids must be unique throughout the entire document.
to answer your question though:
<iframe id="frame1"></iframe>
<iframe id="frame2"></iframe>
<input type="button" onclick="refreshFrames()" value="refresh frames" />
<script type="text/javascript">
function refreshFrames(){
frame1 = document.getElementById('frame1');
frame2 = document.getElementById('frame2');
if(frame1.contentDocument){
frame1.contentDocument.location.reload(true);
frame2.contentDocument.location.reload(true);
} else {
frame1.contentWindow.location.reload(true);
frame2.contentWindow.location.reload(true);
}
}
</script>
(For IE, you might have to use contentWindow instead of contentDocument depending on the version of IE you're trying to support)

how to disable a control in javascript

document.getElementById("ctrl").disabled = true;
this works in IE but does not works in mozila. What shoul I do?
Did you try:
document.getElementById("ctrl").setAttribute('disabled', true);
<body>
<input id="btnSubmit" type="button" value="submit" onclick="disabled(this);"/>
<script>
function disabled(ctrl) {
ctrl.disabled = true;
}
</script>
</body>
It is hard to tell what the issue is that you are having. Does mozilla do anything when the code is executed? does it display an error? What version of ie did you test it with? And can you also provide the html for the ctrl element?
One of the issue with IE and the getElementById method is that in some versions of the browser it will match on the id attribute of a tag as well as the name attribute (which does not follow the JavaScript spec). In Mozilla it is only matching using the id attribute.
http://msdn.microsoft.com/en-us/library/ms536437(VS.85).aspx

Categories