Is it possible to include elements in the DOM after it is loaded and ready?

I really do not like the idea of going back in history and keeping the new form settings as generated. This eliminates the user's choice to go back and correct a wrong input that may have generated their own current form configuration.

I see two solutions:

(1) My favorite - Work always forward, without worrying about handling browser history: Use a form validator like Webforms2 a href="https://github.com/westonruter/webforms2"> link ). I have used it in the past and it is very versatile. Follow the tutorial: link . Easy to use in combination with modernizr.

(2) What I do not like - use Web Storage with fallback in Cookies. This solution is worse because you need to check if Web Storage is supported. For previous browsers implement a fallback by saving the configuration of the form in memory through the use of Cookies. Those who do not have an up-to-date browser usually do not like the internet so much, and they like it less when websites do not work properly with their outdated browsers. Still, not everyone has Cookies enabled Because of their overuse, they have long been considered the Internet villains and many older people still have the habit of disabling Cookies.

However, my advice is: Keep good practices. Form should be validated at the time of submission, not later. If the submission fails, the user should not be redirected to any page, should remain wherever he is, and fill in the highlighted fields correctly. A correct approach would validate information before browser / database communication. >

I do not know of any AAA sites that would redirect a user to another page while the form has not yet been filled out correctly.

Good Luck!

I think the issue is not to add values in the DOM, because you said it is doing so, it is in manipulating them so that they recover their state when browsing the page.

One way is to save the states of the elements you added in your browser, either via Cookie (not a good solution) or Web Storage ).

So when you load the DOM, you can check if the data is saved to re-add the elements in the DOM as needed and change its attributes.

But to answer the question, yes, it is possible, for example:

$('body').append(document.createElement('div'));// vai adicionar uma div no body

// nativo:

document.body.appendChild(document.createElement('div')); // mesma coisa só que sem jquery

EDIT, because of author comment:

If you have a table and want to store it completely, so you do not request it back to the server, a not-so-elegant solution is to transform the content into a string, store it in a storage (preferably because of its size) make the evaluation at the time of putting back, example:

Saving table contents:

localStorage.setItem('minhaTabela', $('#minhaTabela').html());

Retrieving table contents:

$('#minhaTabela').html(localStorage.getItem('minhaTabela'));

Verify that the user has localStorage support and if there is a value saved in the item you are going to store the table data.

The best way for data to persist in the table is to use localStorage or sessionStorage . HTML5 - LOCAL STORAGE

Here is an example usage. The data is kept in the localStorage.

link

link

  

In this case I could (should) redirect the user to the screen   above.

I absolutely disagree that I should redirect the user to the previous screen, if it means what I mean - back in browser history - type history.go(-1) (which is equivalent to the browser's "Back" button).

This, in my opinion, would be a ghastly gambiarra.

I think you could do one of these two things:

1st option - after processing the form on the server, and it does not validate, either forwarding or not (via header Location to the same URL, case If you want to avoid re-sending the form data if the browser reloads the page), you will need to mount the changed DOM from the request strong> on the server side, that is, instead of making the change to the DOM on the client side using JavaScript / jQuery, you'll have to send the form back with the HTML already changed from the server.

2nd option - validate form via Ajax , that is, you avoid the default submit and make a $.post (or equivalent) to send the data form by Ajax. If it does not validate, beauty, the DOM stays there, mounted. If you validated and did what you had to do, then you either change the page via JavaScript with window.location or update it in some other way. The important thing here is to process the Ajax callback and take the appropriate action in case of error (message to the user) or success.

That said, I remembered MantisBT , a software that I like, but under certain conditions tells the user to go back to the previous page when submitting a form gives error. In case, it works quiet because there is no form manipulation by JavaScript. In fact, it is an application that exists since the time when " running with JavaScript disabled " was a requirement ...: -)

In your case, if you need same to rewind browser history, the way is to use web storage as the staff has spoken. However, be aware: Internet Explorer 7 and earlier do not support web storage . The alternative would be cookies .

But why take steps back when you can walk forward? Using post via Ajax you are taking a step forward into the world of SPA / p>     

Is it possible to validate the data without submitting the form? Through evt.preventDefault() ?

Another way, would be to take all the information and treat it in the reload of the page. Send the data already filled in, validate and re-create the elements, you can create a javascript that reads a JSON with this information, which can be put through the GET and re-creating elements. Or a page load routine to validate data when reloading.