Submit form before redirecting to another page with JavaScript

Question

I have a complex form; within it there's also an 'add more items' link that takes the user to another form-page (independent). What happens at the moment is that when they have edited the main form without saving it and they go to the independent form, when they come back to the main form page they have lost the edits.

<form id="form_1">

[...]
<a href="/add-something-else/">Add something else.</a>

<input type='submit'/>
</form>

add-something-else page:

<form id="form_2">
<input type='submit'/ onsubmit='go_back_to_form_1'>
</form>

Saving everything in sessionStorage would be overkill (I think), and scripts like FormPersistence.js mess about with other functionalities of my form (i.e. Django formset). I have tried to achieve what I want by attaching this function to my 'add something else' button:

$.when(document.forms["form1"].submit()).then(function(){
    window.location.pathname = '/add-something-esle/'
})

For some reasons, though, when I go back to form1 I see that the form wasn't saved. How can I achieve what I want?

[Event.preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) — Mechanic, May 23 '20 at 13:13

score 0 · Answer 1 · answered May 23 '20 at 13:26

0

Full page reloads clear all form state. You need a way to persist the state between full page reloads. You can use sessionStorage for that.

answered May 23 '20 at 13:26

Ivan V.

7,593
2
36
53

As I wrote in my question, I was hoping there was another option, because it's a complicated form. – HBMCS May 23 '20 at 13:35

score 0 · Accepted Answer · answered May 23 '20 at 16:48

0

A <form> is made up of input elements, and you can persist all the <input .../>s to session/local storage and recover them all on page reloads; I remember answering a similar question before; but here is the summary from that answer:

basically you set an event listener on input elements you want (i.e. query selector); make sure they have id (or something similar) unique because we are going to use it as key t store the value;

here is an example:

function persist(event) {
  // `id` is used here
  sessionStorage.setItem(event.target.id, event.target.value);
}

// you may use a more specific selector;
document.querySelectorAll("form input").forEach((formInput) => {
  // `id` also used here for restoring value
  formInput.value = localStorage.getItem(formInput.id);
  formInput.addEventListener("change", persist);
});

this snippet will persist all <form> tag's inputs values into session storage; you can also use more specialized selector in .querySelectorAll() to meet your need

answered May 23 '20 at 16:48

Mechanic

5,015
4
15
38

As mentioned in my question I also have formsets in my main form, which means that I have hidden management fields for taking tracks of added/delete forms belonging to formsets. – HBMCS May 23 '20 at 17:10
I'm happy to give that a go though. document.querySelectorAll("workForm input") is undefined for me :( . – HBMCS May 23 '20 at 17:17
@HBMCS `workForm` is the `id` of `form` tag; so you should use proper selector which is `document.querySelectorAll("#workForm input")`; you were selecting `workFrom` tag which is non exist – Mechanic May 23 '20 at 17:19
It's a great solution indeed. What about the – HBMCS May 23 '20 at 19:11
@HBMCS `document.querySelectorAll("#workForm select") `. I suggest you read more about [Document.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) – Mechanic May 23 '20 at 19:21
Yes, I thought there was a way to do everything with just one querySelectorAll. Thank you for the information, it's still not useful to me due to the Django hidden management form fields, though it's good to know. – HBMCS May 23 '20 at 19:29

Submit form before redirecting to another page with JavaScript

2 Answers2