I have a HTML page that has submitting request every 5 seconds. how can i disable or greyed out the a href in the setTimeoutFunction before the form submits?
<html lang="en">
<head>
<META content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<META name="viewport" content="width=device-width"/>
<script>
setTimeout(function () {
// disable <a>
document.forms.form.submit();
}, 5000);
</script>
</head>
<body>
<section class="wrapper">
<section class="container">
<section class="content">
<h1>Title</h1>
<p>Description</p>
</section>
<form id="form" method="post" action="http://toawebsitepost.com">
<input type="submit" hidden>
</form>
<a class="cancel" href="http://toawebsite.com">Cancel</a>
</section>
</section>
</body>
</html>
As CBroe pointed out it's no good just setting pointer-events to none when the anchor can still be accessible by keyboard.
Instead you could add a click listener to the anchor. When the setTimeout callback is executed it changes a variable called isDisabled to true. If the button is clicked before the time out the handler (in this case) logs a message, otherwise we use preventDefault to stop normal anchor behaviour.
const cancel = document.querySelector('.cancel');
cancel.addEventListener('click', handleClick, false);
let isDisabled = false;
function handleClick(e) {
if (isDisabled) {
e.preventDefault();
} else {
// Normally you would be navigating
// to a website, but in this example
// we're just logging a message
console.log(`Navigating to ${e.target.href}`);
}
}
setTimeout(function() {
isDisabled = true;
cancel.classList.add('disabled');
document.forms.form.submit();
}, 5000);.disabled { color: #ababab; cursor: not-allowed; }<section class="wrapper">
<section class="container">
<section class="content">
<h1>Title</h1>
<p>Description</p>
</section>
<form id="form" method="post" action="http://toawebsitepost.com">
<input type="submit" hidden>
</form>
<a class="cancel" href="http://toawebsite.com">Cancel</a>
</section>
</section>You can remove your tag and use instead. Using button:
<section class="wrapper">
<section class="container">
<section class="content">
<h1>Title</h1>
<p>Description</p>
</section>
<form id="form" method="post" action="http://toawebsitepost.com">
<input type="submit" hidden>
</form>
<button class="cancel" onclick="navigateToUrl()">Cancel</button>
</section>
</section>
JS:
navigateToUrl() {
window.location.href = "http://toawebsite.com"
}
setTimeout(function () {
// disable <a>
const button = document.querySelector('.cancel')[0];
button.disabled = true;
document.forms.form.submit();
}, 5000);
Or if you want to stick to <a> then add a custom CSS class to it to prevent clicks:
setTimeout(function () {
// disable <a>
const aTag = document.querySelector('.cancel')[0];
aTag.classList.add('disable');
document.forms.form.submit();
}, 5000);
CSS:
.disable {
pointer-events: none;
color: grey;
}
You could add a special CSS class that will remove default behavior from a link. PLease check the example:
setTimeout(function () {
// disable <a>
document.querySelector('.cancel').classList.add('disabled');
document.forms.form.submit();
document.querySelector('.cancel').classList.remove('disabled');
}, 5000); .disabled {
pointer-events: none;
}<section class="wrapper">
<section class="container">
<section class="content">
<h1>Title</h1>
<p>Description</p>
</section>
<form id="form" method="post" action="">
<input type="submit" hidden>
</form>
<a class="cancel" href="http://toawebsite.com">Cancel</a>
</section>
</section>