Develop Reference

Javascript problems with IE8

I'm trying to disable an input with JavaScript or jQuery
//document.getElementById("monto").disabled=true;
$(document).ready(function(){
$("#monto").attr("disabled", "disabled");
});
The code works fine in chrome, Firefox, and some versions of IE, but doesn't work with IE 8,
also tried with Hide/show but doesn't work too.
I know the best solution is to upgrade, but my boss thinks our clients are too dumb to do that.

try this article from stackoverflow :)
var disableSelection = function(){
$("#elementId").prop("disabled", true);
};
var enableSelection = function(){
$("#elementId").prop("disabled", false);
};

wierd way to get chrome, IE 8 and firefox to submit the same form

This is the only way I found to get all three browsers to submit the form without problems. Is there an obvious reason why this is so? A more elegant solution to this? I'm using jQuery 1.9. Chrome is the odd man out here, as the code in the else is sufficient to submit via IE and Firefox.
function submitFormByPost(actionName){
$("#eventAction").val(actionName);
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome){
document.getElementById('myForm').method='POST';
document.getElementById('myForm').submit();
}
else{
document.forms[0].method='POST';
document.forms[0].submit();
}
}

jQuery should already provide a cross-browser way to submit a form. Try:
var $form = $("#myForm");
$form.attr('method', 'post');
$form.submit();

The way that works in Chrome will work in the others also, so just use that:
function submitFormByPost(actionName){
$("#eventAction").val(actionName);
var frm = document.getElementById('myForm');
frm.method = 'POST';
frm.submit();
}
Or using jQuery all the way:
function submitFormByPost(actionName){
$("#eventAction").val(actionName);
$('#myForm').attr('method', 'POST').submit();
}

This is for some older Chrome versions compability. Normally document.forms[0] works as well on Chrome as on other browsers. Easiest way to check, open Chrome console and write console.log(document.forms[0]); - works fine.

How to set onClick with JavaScript?

I am trying to set the onclick event using javascript. The following code works:
var link = document.createElement('a');
link.setAttribute('href', "#");
link.setAttribute('onclick', "alert('click')");
I then use appendChild to add link to the rest of the document.
But I obviously would like a more complicated callback than alert, so I tried this:
link.onclick = function() {alert('clicked');};
and this:
link.onclick = (function() {alert('clicked');});
But that does nothing. When I click the link, nothing happens. I have testing using chrome and browsing the DOM object shows me for that element that the onclick attribute is NULL.
Why am I not able to pass a function into onclick?
EDIT:
I tried using addEventListener as suggested below with the same results. The DOM for the link shows onclick as null.
My problem may be that the DOM for this element might not have been fully built yet. At this point the page has been loaded and the user clicks a button. The button executes javascript that builds up a new div that it appends to the page by calling document.body.appendChild. This link is a member of the new div. If this is my problem, how do I work around it?

I have been unable to reproduce the problem. Contrary to the OP's findings, the line below works fine on the latest versions of IE, FF, Opera, Chrome and Safari.
link.onclick = function() {alert('clicked');};
You can visit this jsFiddle to test on your own browser:
http://jsfiddle.net/6MjgB/7/
Assuning we have this in the html page:
<div id="x"></div>
The following code works fine on the browsers I have tried it with:
var link = document.createElement('a');
link.appendChild(document.createTextNode("Hi"));
link.setAttribute('href', "#");
link.onclick= function() {link.appendChild(document.createTextNode("Clicked"));}
document.getElementById("x").appendChild(link);
If there is a browser compatibility issue, using jQuery should solve it and make code much much more concise:
var $link = $("<a>").html("Hi").attr("href","#").click(function (){$link.html("Clicked")})
$("#x").html($link)
If brevity is not a strong enough argument for using jQuery, browser compatibility should be ... and vise versa :-)
NOTE: I am not using alert() in the code because jsFiddle does not seem to like it :-(

If you're doing this with JavaScript, then use addEventListener(), with addEventListener('click', function(e) {...}) to get the event stored as e. If you don't pass in the event like this, it will not be accessible (although Chrome appears to be smart enough to figure this out, not all browsers are Chrome).
Full Working JSBin Demo.
StackOverflow Demo...
document.getElementById('my-link').addEventListener('click', function(e) {
console.log('Click happened for: ' + e.target.id);
});
Link

You can add a DOM even listener with addEventListener(...), as David said. I've included attachEvent for compatibility with IE.
var link = document.createElement('a');
link.setAttribute('href', "#");
if(link.addEventListener){
link.addEventListener('click', function(){
alert('clicked');
});
}else if(link.attachEvent){
link.attachEvent('onclick', function(){
alert('clicked');
});
}

Setting an attribute doesn't look right. The simplest way is just this:
link.onclick = function() {
alert('click');
};
But using addEventListener as JCOC611 suggested is more flexible, as it allows you to bind multiple event handlers to the same element. Keep in mind you might need a fallback to attachEvent for compatibility with older Internet Explorer versions.

Use sth like this if you like:
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

Javascript/jQuery not working in IE

This code works in all browsers except for IE. Anything I can do to add support for it?
<script type="text/javascript">
$(document).ready(function() {
var currentArrayNum = 2;
$('#names').on({
blur: function() {
currentArrayNum += 1;
var name = $("<p><input class='input' type='text' name='guests[]' value='' /></p>");
var nullFields = 0;
$(this).closest('div#names').find('input.input').each(function(){
if($(this).val() == ""){
nullFields++;
}
});
console.log(nullFields);
if(nullFields <= 1){
$('#names').append(name.fadeIn(500));
$('#leftbox').scrollTop($('#leftbox')[0].scrollHeight);
}
}
}, 'input');
});
</script>
It should mean that extra input fields are added. You can see it in action (in FF, Chrome, Safari etc) under 'Enter names for the guestlist' here.
EDIT
Tested in IE9 but doesn't work for me.
I should also ask if there's a way of testing in different versions of IE (and othe browsers) on a Mac?

Note that in some (all?) versions of IE, you need to have developer ("F12") tools open for console.log to work, otherwise console is undefined and so console.log() throws an error.
That may be your issue.

I know your question is about a week old but Im not sure if you found a solution or the reason for the cross-browser issues. I was recently working on a custom modal pop up window and I needed to find my scrollTop. Trust me, I love jQuery to death and I use it everyday but sometimes you need to use some good ol' javaScript. I.E accesses the body of the DOM differently than say Chrome or FF.
//I.E.
document.documentElement.scrollTop;
//Chrome, FF, etc.
document.body.scrollTop;
Basically, create a script that detects the user's browser and then include a conditional statement that will assign the value the appropriate way.
//Detect Browser
if (clientBrowser == "IE") {
currTopPos = document.documentElement.scrollTop;
} else {
currTopPos = document.body.scrollTop;
}
I created a script for one of the current projects Im working on, let me know if you would like to take a look at it.

Sending user to their browser's Home Page using Javascript

Is it possible to get a browser's home page using Javascript?
I'd like to place a link on a page that goes to the home page set in the browser.

EDIT: simplified answer
Identify browsers and:
Call window.home(); for all browsers
Call window.location.href =
"about:home"; for IE
To do so you can use http://jquery.thewikies.com/browser/
The jQuery Browser Plugin is an addon
for jQuery that makes it easy to
uniquely identify your visitors'
browsers.
Other solutions:
<script language="javascript">
function gohome(){
if (typeof window.home == 'function'){ // The rest of the world
window.home();
} else if (document.all) { // For IE
window.location.href = "about:home";
} else {
document.write("<p>Please click on your browser's Home
button.</p>");
}
}
</script>
This is via this website. The poster states that there are issues to target Safari. This can be fixed using this other website.
Using the CSS tricks explained there you can then do:
<script type="text/javascript">
isSafari3 = false;
if(window.devicePixelRatio) isSafari3 = true;
</script>
and use this in the script above to call the correct function:
if (typeof window.home == 'function' || isSafari3)

Default home page (default new tab) URL:
Google Chrome:
https://www.google.com/_/chrome/newtab
Firefox and IE:
about:home
Opera:
opera:speeddial
Safari:
http://livepage.apple.com
To find out the default home page URL of your browser, go to your home page and type location.href in the console. Note that the browser might redirect you to your locale, so you'll need to find out the page before redirection (it happens on Chrome).
If you're using this browser detection code you can use this one-liner to get the correct url:
var homepageurl = browser == 'gc' ? 'https://www.google.com/_/chrome/newtab' : browser == 'op' ? 'about:speeddial' : browser=='sa' ? 'http://livepage.apple.com' : 'about:home'
Browser detection code JSFiddle: https://jsfiddle.net/oriadam/ncb4n882/

Not sure if there is a cross-browser solution. In IE you can use the HomePage behavior and call navigateHomePage.

For FF and the like: window.home();
For IE: location = "about:home";

window.home() didn't work for me in FF37, but this was fine:
location.href = "about:home";