Reload current page if user submits form with Ctrl-click or Shift-click

Question

In WooCommerce in product page, sometimes users click on Add-to-cart button while pressing Ctrl or Shift keys, for opening the resulting page in a new tab/window.

In this cases, I need current page to reload. How can I do it?

Consider that Add-to-cart button submits the form.

Answer 1

At first stop normal submitting with event.preventDefault() on submit event form then doing any thing you want with the click event on the add to cart button.

You can do it with something like this:

function handleOnsubmit(event) {
  event.preventDefault()
}

function handleOnclick(event) {
  if (event.ctrlKey || event.shiftKey) {
    location.reload();
  } else {
    document.getElementById("myForm").submit();
  }

}

<form action="https://stackoverflow.com/" id="myForm" onsubmit="handleOnsubmit(event)">
  <input type="text" name="name">
  <button type="submit" onclick="handleOnclick(event)">Add to cart</button>
</form>

In Woocommerce probably you should use addEventListener for the form and the add to cart button in the single product page. like this:

document.querySelector("form.cart").addEventListener("submit", handleOnsubmit);
document.querySelector("form.cart button[type=submit]").addEventListener("click", handleOnclick);

function handleOnsubmit(event) {
  event.preventDefault()
}

function handleOnclick(event) {
  if (event.ctrlKey || event.shiftKey) {
    location.reload();
  } else {
    document.querySelector("form.cart").submit();
  }

}