0

Please see this minimum example

When using location.href to navigate to a new page, I can easily go to previous thanks to the browser.

<button>Can Go To Previous Page</button>

<script>
  document.querySelector("button").addEventListener("click", () => {
    window.location.href = "https://google.com";
  });
</script>

And I can easily disable the behavior simply using location.replace

<button>Can Not Go Back Anymore!</button>

<script>
  document.querySelector("button").addEventListener("click", () => {
    window.location.replace("https://google.com");
  });
</script>

Now, how can I make form.submit() acts like location.replace?

Because you can still go back to the previous page when you submitting a form.

Is it possible to do this?

<form action="/action_page.php">
  <label>
    First name:
    <input type="text" id="firstname" name="firstname" />
  </label>
  <button>Submit, Can still go back here</button>
</form>

<script>
  document.querySelector("button").addEventListener("click", () => {
    const form = document.querySelector("form");

    form.submit();
  });
</script>
Joseph
  • 3,974
  • 7
  • 34
  • 67

3 Answers3

3

Forms have a default behavior which causes them to submit the values of the form to the endpoint of the action attribute, or reload the form on the same page. The former action causes a redirect from the backend and therefor you've navigated forwards and can now go back.

You can use AJAX to manually submit the form with JavaScript and disable the default behavior. First, listen for the submit event on the form itself, not the button. A button without a specified type attribute will automatically be a submit button if it is inside a form.

Then immediately call Event.preventDefault() to stop the form from submitting. Now you can create your own submitting behavior.

Extract the values from the form with a FormData constructor. This will return you an iterable object in which all input fields are stored in pairs of name and value.

Now use the Fetch API to send the FormData object to your endpoint, which you've specified in your action attribute, and send it with a POST method. Make sure that your backend also expects this method.

Then after the request has finished use location.replace() to change the URL to your liking.

The example below contains all that I've described here above. Check it out and please let me know if you have any questions.

const form = document.querySelector("form");
form.addEventListener("submit", async event => {
  event.preventDefault();
  const formData = new FormData(form)
  const response = await fetch(form.action, {
    method: 'POST',
    body: formData
  }
  if (response.ok) {
    location.replace('yourredirecturl')
  }
});
Emiel Zuurbier
  • 19,095
  • 3
  • 17
  • 32
1

You could do a simple workaround that looks like this:

<form onsubmit="event.preventDefault(); validateMyForm();">

Then you'd need to write the validateMyForm function to handle the form and redirect the user.

BoomshakalakaNL
  • 119
  • 5
0

For this scenario you can simple delete browser history on action_page.php while loading

browser.history.deleteAll();

FYI :- https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history/deleteAll

Praveen Kumar
  • 11
  • 1