how to disable a control in javascript - 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

Related

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 code not working IE8

I am trying to make links work which we click to change the language of website using JavaScript. Here is the HTML code:
'<form action="" method="post" name="currlang">'.
'<input type="hidden" name="languageval" value="'.$session->value("language").'"/>'.
'<a onclick="langa(this, \'en\');" class="langs'.($session->value("language")=='en'?" active":"").'" id="en"></a>'.
'<a onclick="langa(this, \'it\');" class="langs'.($session->value("language")=='it'?" active":"").'" id="it"></a>'.
'<a onclick="langa(this, \'pl\');" class="langs'.($session->value("language")=='pl'?" active":"").'" id="pl"></a>'.
'</form>'.
and here the javascript:
function langa(obj, valu) {
document.getElementsByName("languageval")[1].value=valu;
document.getElementsByName('currlang')[1].submit();
}
The script works fine on new browsers (Firefoxe, Opera, Chrome, IE9) but when testing it on IE8 it gives an error:
"'document.getElementsByName(...).1' is null or not an object".
After some research I found out that getElementsByName() is not supported by IE8 and above and maybe the solution would be to use jQuery and this is where I need help.
How can I make this work with jQuery or without it?
You can try using an ID or class to achieve the same purpose instead of name.
Example:
<div id="foo">This is id of foo</div>
<div class="choo">This is class of choo</div>
Then if you use ID then use:
document.getElementById('foo');
and with class use:
document.getElementsByClassName('choo');
I hope this helps!
For this to work the way you want switch name to Id.
<script type="text/javascript" language="javascript">
function langa (obj, valu){
$("#languageval").val(valu);
$("#currlang").submit();
}
</script>
The # will pull the element with that Id and val() is the get/set for the element's value.
Edit: added the type and language tags to

HTML objects not visible to JavaScript in Firefox 6

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.

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)

Categories