Why does submit refresh page - html

I found innumerable answers and explanations on refreshing after submit - how to do it, how to prevent it, etc. But I'm just wondering why all submit functions automatically reload the page? I would have thought the default is to not refresh, and there's an option for it, something like
<button type="submit" refresh="false">Submit</button>
Is this like an unspoken programming rule, or is there a reason to do with GET and POST requests or something of that kind?

Submitting a form is like clicking a link.
You send something to the server (when you click a link that's just a URL, with a form it is more complex data).
The server makes a response
The browser shows you the response
It would only "reload the page" if the server side code you wrote sent the same page back.
It's the normal behaviour because when you send data to the server, you usually want to know if it worked.
(The server could response with 204 No Content to avoid the browser loading a new page, but that would confuse most users because they would have clicked a button and nothing would appear to happen).

Related

How do I capture/view the post-request generated by my browser on submission of a form?

So the system I'm working on is using a complicated process to generate and display HTML forms, and an even more complicated process to handle these forms once submitted.
I want to be able to cut through the abstraction and just view, in plain text, the post-request that is generated by my browser when I hit 'Submit' on the form - the headers, the payload, everything - How can I do this? If there's a tool to make it easier to pick through, all the better, but if I can just get it in plain text that's fine too!
I realize this might seem like a very basic question, but I've actually never needed it before.
Thanks!
If you are using chrome hit F12 before submitting form,
then go to network tab -> Check Preserve log checkbox, and then hit the submit button, you can see the detail of your post request

What might be adding parameters to the URL?

I have a login form with username and password parameters. During development while refreshing the browser, on a few occasions I have seen my form parameters get put in the URL. This catches my attention since it's a username and password.
For example: http://localhost:8080/ui/?username=xxxxx&password=xxxxx#/login?redirectedFrom=%2Fsomewhere
However, I don't recall exactly what I did prior to this, and I am unable to reproduce it. I've seen it 3 times over a period of weeks.
Any ideas what might be causing the form parameters to be put in the URL?
I'm not sure if any of this is relevant, but I'm using angular with ui-router. The parameters are also parameters to POST, but I don't recall whether I submitted them. I think (although not sure) each time this has happened it was shortly after my login times out and I am redirected to the login page, which adds a ?redirectedFrom parameter. I'm using Chrome and it remembers and fills in the username/password inputs. Chrome developer tools is open. It might be after restarting the server. A browser refresh was done.
I believe you submitted the form again.
In login form always use POST action in your form tag, like this:
<form action="POST">
Don't press F5 to refresh your page after you submit the form. Click in your URL and enter again in your form page.

Can I make an HTML form perform two actions?

Can I use my HTML form to perform multiple actions?
Post the information to another destination.
Navigate a user to another page once they submit the form.
At the moment I can post the filled form to the destination but cant navigate the user to another page using HTML specifically. Is there any method in HTML to do this?
Any suggestions?
Things are easy if you control the server and/or are on the same domain, then you can do a server side redirect. But since you are using salesforce surely you don't control that. Nevertheless, double check their documentation for a redirect option you can put in the form.
If that fails, one thing I'd try is to submit it to an iframe: add <iframe name="foo" id="foo"></iframe> somewhere to your html (you can hide it too if you want) and add target="foo" to your form. Then, also add an onsubmit javascript handler to the form that redirects after a delay to allow the form to be processed. The timing of the delay is likely to be a source of bugs btw, checking for errors in the submitted form can't be easily done across domains, you'd be guessing. Maybe an onload handler on the iframe can do the redirect though, I'm not sure, but worth a try.
This isn't guaranteed to work either, some sites don't like being in iframes. If that fails, you might try setting target="_BLANK" to submit the form to a popup window then redirect your main window using javascript or something. This will require you to give an instruction to the user to close the window.
Lastly, if you can submit the data via a server side API call to salesforce, that would be good too because then the plain redirect option is back under your control.
You can use redirect after you perform whatever you are going to do on the first page (the one from form action)

disable back in one page alone :(

How can i disable browser from going back to a particular page? My scenario is
Login page -> change password page ->user returns to login page again-> (on browser back should not go back to change password page) but currently it goes to the change password page. I am currently working on a grails application. How can i solve this issue?
You can't stop users from going back if they want to, because a browser can do whatever it feels like.
But if you only want to prevent users from going back accidentally, then just make the "change password" page only appear in response to an HTTP POST (not just a URL link, which is an HTTP GET request). Most browsers will give a warning about re-submitting the form if the previous page was the result of a POST request.
Use javascript's location.replace() function:
http://www.roseindia.net/javascript/javascript-location-replace.shtml

Best Way For Back Button To Leave Form Data

I'm creating a web page based on user input from a form. After the user sees the generated page I want to allow them to press the back button and make changes to the form. I would like to display the form as they had filled it out previously. What is the best way to get this behavior (with cross browser support)?
After the user sees the generated page I want to allow them to press the back button and make changes to the form. I would like to display the form as they had filled it out previously.
There is no need to add any clever fancy code; that is what browsers will do by default, unless you take active steps to prevent it, such as:
breaking the cache with Cache-Control/Pragma headers
generating the form page itself from the response to a POST (use POST-Redirect-GET instead)
generating the form elements from script
Cookie solutions are fragile and need special handling if you don't want two tabs open at once to get very confused. Make it easy for yourself: let the browser do the work.
JQuery has a nice cookie plugin which i used to keep exam data while the user browsed the site for the answers in place.
Store the saved information in cookies as delimited data. If the cookie exists, repopulate the form.
If you use document.formName.fieldName syntax, there are no cross-browser issues.
As a fall-back if cookies are disabled, you can store it on the server and do the same with AJAX.