missing appended elements on window.history.back() - javascript

I have a simple form in my html page.
User can add elements in my form via append jquery function. It works fine, but if the form is submited and user is redirected to another page and goes back via window.history.back(), appended elements are missing.
Can you help me, how to save the page state before submit form to prevent missing appended elements?

Related

How can I get length of a form element from another HTML document?

I have to html pages: Submit owner info page and the second page called submit car info
second page contains a form with ID=car_info.
I want to get the length of the form in the second page when I click on the next button which is available in the first html page (Owner info).
I noticed that document.getelementbyid(id).length works only on the fist page.
Any help

Back button which goes back to filled in form

Is there a way to add a Back button which reloads a form with the inputs filled in?
I have a form with some input fields and a save (submit) button. When clicking submit, if the mandatory fields aren't filled in, a new page opens with a message. If I use the browser's Back button, I receive this message:
Confirm Form Resubmission
This webpage requires data that you entered earlier in order to be
properly displayed. You can send this data again, but by doing so you
will repeat any action this page previously performed. Press the
reload button to resubmit the data needed to load the page.
ERR_CACHE_MISS
So basically, it asks me to Refresh, and then confirm by clicking OK on a pop up window, after which the form reloads but with empty fields.
I have tried thinking of everything, but I can't find a solution. Thanks.
If it's possible, I would change the structure so that the form posts back to itself, and runs the validation of the mandatory fields. Then, if everything's ok, it will continue whatever processing is necessary. If there's a problem, it can show the form again, but in your code you will have access to the values already submitted, so you can pre-populate the form with these values and then display it to the user. It's a pretty standard design technique for this sort of thing.

Symfony 3 Pagination Form Data

i have a problem.
I use Symfony 3 for my project. In my project i have a litte pagination.
See: http://getbootstrap.com/components/#pagination-pager
On these two buttons i use the href attribute to navigate between sites.
This works perfect. But now comes the problem.
On every page are a few input fields of which i need the values.
But the pager "buttons" are links, so if i click on one "button" the form will not be submitted.
If i change the links to real buttons, the form will be submitted, but i can't change the page, because there is ne href attribute.
I know i have to set the location in the action attribute of the from, but then i can't navigate backwards or forwards.
So what can i do to get the form params and navigate forwards and backwards?
I hope you understand my problem.
If you want to go backwards and forwards, you don't want a submit button for each page. You only want a submit button at the end, which will submit your whole form (all the pages).
What you should do is:
Put your pagination and your pages inside a big <form> tag, with an action attribute if needed.
Inside your pages, put your form fields.
For the last page of your form, you "Next" link must be replaced by a submit button.
That way, when you submit your form in the last page, all the fields of your different pages will be submitted at once. And you still can navigate backwards and forwards inside your form before submitting.

Is there a way to override the browser re-send form prompt when reloading a page?

I have a page with a table, that displays data in four views. The user can edit a record by opening a popup. When closing the popup, I would like to reload the page to reflect the updated record.
So I'm doing this:
<script type="text/javascript">
window.onload = function(){
alert("#blabla#");
window.opener.location.reload(true);
self.close();
}
</script>
which does what it should, but when the parent page is reloaded, I get a prompt asking me if I want to re-send the form (YES).
Question:
Is there a way to override this prompt? I'm pretty much stuck with the page design, so I cannot do any AJAX/event behavior etc to trigger the update of the table.
I take it the main page (the one you're reloading) was itself a response to a form submission (that would be why you're getting the message).
If like most search result pages it allows you to repeat the search (by submitting a form on the result page), you could submit that form rather than reloading. If not, you could include a hidden form on the page (with the relevant search criteria) for expressly that purpose.
Then your JavaScript changes to:
window.onload = function(){
alert("#blabla#");
window.opener.reloadForm.submit();
self.close();
}
...where reloadForm is the id of the form element that repeats the search.
It might be nicer, though, to dynamically insert the row in the search results without reloading the page...

How do I add a callback function to .submit() in Javascript?

I am submitting a page onclick of a form element and need a function to run after the submit refreshes the page. I'm trying to add an animated scroll back to the clicked element that caused the submission. I've got the scroll part covered but I can seem to figure out how to cause the function I wrote for the scroll to run after the page refreshes from the submit.
Any timely help would be much appreciated!
If you are doing a full submit, rather than an AJAX submit, then the page that displays afterwards is not the same page as the one that the form was submitted from. Consequently, the identity of the clicked element will not be available on the second page.
What you need to do is, during the submit handler, store the identity of the clicked element (Should probably be a unique ID of some kind) in a hidden field of the form.
When the page refreshes, it should now have the unique ID available (Probably placed in the same hidden field of the form by the server side code) and a javascript function can read this value to control the scrolling.
Does this make sense?
If you update your question to include some sample code, then I might be able to clarify further.
If you do a "real" form submit, where the actual page refreshes, there is no way you can do it from the client (except using frames). Once you leave the page, your javascript is out of scope. You need to insert the javascript to the refreshed page on the server.
If, on the other hand, you are submitting the form and refreshing a part of the page via ajax, then, depending on the framework you use, you'll be looking for a callback hook like onSuccess etc. in your ajax submit function
This would be easier to do in ajax however if you need to do it as a postback then you need to attach an event to the body load event and send some data back with the postback that would identify that the page has loaded as part of a post back and not a new page load.
e.g. create a hidden contol ont he web page and on the postback give it a value , on the postback check to see if that hidden control has a value and if so run your scorll code.

Categories