Greyed out or disable <a>-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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;
}

CodePudding user response：

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>

CodePudding user response：

Just add an event handler to the anchor that selectively calls event.preventDefault();, e.g:

let isDisabled = false;

setTimeout(function () {
  isDisabled = true;

  // set anchor class to make it grey

  form.submit();
}, 5e3);

function onInteraction(event) {
  if(isDisabled) {
    event.preventDefault();
  }
}


/*[...]*/

<a href="https://website.com" onClick="onInteraction" onKeyUp="onInteraction">
  Cancel
</a>

Obviously don't use html attributes for event handlers! It's just for illustration