I have the following html code:
<html>
<head>
<script type="text/javascript" src="buttonClicked.js"></script>
</head>
<body>
<form id="confirmChangeId" name="selectionForm" method="POST">
<input id="btnChange" type="submit" value="Change">
</form>
</body>
</html>
using the following javascript:
window.onload = function() {
initFunc();
}
var initFunc = function() {
var change = document.getElementById("btnChange");
change.onclick=function() {
window.location.href='http://stackoverflow.com';
//alert("change button clicked"); // If this line is uncommented, then the page re-direction does occur
}
}
Using Firefox, when the alert is uncommented in the JS file then the redirection does occur. To throw a further spanner in the works, no redirection occurs whatsoever when using Chrome or Opera. I'm clearly missing something small here, but can't find what it is. Suggestions?
If you want the redirection to reliably work, you must add return false; at the end of your onlick function.
Note: You should really attach event listeners to the objects instead of using the outdated onclick property.
var change = document.getElementById("btnChange");
change.addEventListener('click', function(event) {
event.preventDefault(); // stops the click from completing
window.location.href='http://stackoverflow.com';
}, false);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With