Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - No | Safari 5.1.4 - Yes
How to Disable or Enable Submit Button using jQuery
It sometimes creates a bad rapport for the website, since users do not want to be restricted for their activities while browsing. However, it is always good for a web developer to know a trick or two, as it might sometimes help them maintain multiple web pages efficiently.
Many online banks restrict their users to click the refresh or back button, as it might hinder or stop a transaction in process. Doing so, the bank or the client might lose valuable data in the process.
In our example, we will use two simple HTML pages. The first page will call the second page using a link and in the process using JavaScript, we will restrict the user from getting back to the first page (from the second page) using the Browser back button.
<html>
<head>
<title>Disable Browser Back Button Using JavaScript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js">
</script>
</head>
<body>
<a href="Page2.htm">Click Here...</a>
</body>
<script>
$(document).ready(function() {
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
});
</script>
</html>
<html>
<body style="font-family:Arial;font-size:15px;">
Click the browser back button <br /> or hit the <b>Backspace</b> key.
</body>
</html>The script, which actually restricts the user from getting back to the first page from second page, will exists in the first page itself.
window.history.forward()
The above JavaScript function in the first page uses the history of the browser and forces it to navigate forward instead of going to the previous page. Therefore, every time the user clicks the back button or hits the backspace key, it will result in the Browser navigating or pushing the user forward and showing the same page (the page 2).
How to Disable a Hyperlink using JavaScript or jQuery
While clicking the back button, you might have noticed that it does shifts the focus on the first page for a fraction. Therefore, does this script really make any sense?
Imagine a scenario where, one of your clients is filling up the registration form and has to fill many details before submitting it. However, in a rush hits the backspace key on the keyboard or clicks the Browser back button using a mouse.
Therefore, will clicking the Browser back button still ensures that the second page (page2.htm) will hold the data? To test this scenario, we will add a textbox to the second page and see if the data stays intact.
<div style="padding:20px 0;">
<input type="text" />
</div>Yes it does work. Add more textboxes and check if it still works.
Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - No | Safari 5.1.4 - Yes
There can be many ifs and buts to numerous scripts, which we write in our lifetime and there is no harm in knowing the exact functionalities and usage in our application. It might have some usefulness in the many applications we design.