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.
Related
Suppose we have a login page where, in the first stage, we are asked to enter our email. We send this information to the server, which searches whether there is an account with this email, and if there is, our goal is to change the state of the page, to a page where the user is asked to enter the password for this account. If, on the other hand, there is no account with that email, the state of the page changes to one where the user signs up. And let's say that, for the sake of aesthetics, all this happens using the same url.
My question is, what is the correct way to inform the client's page to what stage to go into?
Sending the whole html code is an option, but this seems like it will put too much pressure on the server. Is there a cleaner way, that we can send less information, and still be able to have the same result?
I am new to django and web dev so please explain thoroughly.
For a browser engine submitting a form with email is a new page request and a new rendering of HTML after that. The source of new HTML code is your server with Django, so you should generate a new HTML with a relevant template and send it as a response.
Such user provoked events change a state of your application for a given user session, not a page.
For speed you can use caches for styles, for menus, for HTML snippets (headers and footers).
Also you can make a one-page application, but you must use JavaScript framework for it. Then your JavaScript code executing in client's browser can request concise JSON with necessary information instead of full HTML.
Then your JavaScript framework is responsible for a correct insert new dynamic HTML elements in the current document object model (DOM).
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
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)
Imagine that in a HTML file I have a disabled button. I might as well use Firebug to enable this button and so do the submission.
My question is: is there any way I disable this button and not allow this submission even when I modify the disabled property of the button in Firebug?
Should I always have to treat this problem on server side, thinking that this possibility could happen?
Yes, you should always validate server-side . The client-side validation is just to facilitate correction by the customer and provide interactivity with him, thus preventing him submit all data and only then discover the correct format or a missing field and then be forced to repopulate all the fields.
The form may have been easily incorporated into another web site and then the action of the form directed to your website or the user inject some malicious code/data in the form. (See: Wikipedia XSS )
Any malicious user can easily bypass a disabled HTML button to activate it by making Firebug or worse, even if you could prevent it, he can simply create an HTML page and point to your destination URL in the form action, or even without creating a page, make an AJAX request. He may even develop a tool for this using PHP with cURL (or sockets ) library or any other programming language like . NET using a WebClient/WebRequest or Java with HttpURLConnection which in both cases are exactly what a browser would do to request a page or send data to another... (And this task can be done in 5 minutes by any Junior Developer)
You should never rely on the user and should never consider client-side validation as a part of security flow, since by being client-side, any information from there can easily be manipulated as has exemplified above.
I am a newbie to web development so sorry for my stupidity. I am actually creating a local website and I wanted to make a user profile page on that website. What I want to accomplish is that the profile page should be not be editable in the normal use case but when the user presses the Edit button (like in facebook), the fields become editable and a save button appears (basically a form but without reloading the page or any server side work). The user then updates the fields and saves. The save request will be sent to the server to update the database (can that somehow be done without reloading the page too ? i see facebook page does not reload when you edit and save).
So that is it. Waiting for a reply.
P.S. I think some javascript code will come to my rescue.
This is a very general question, so I can't do anything but give a general answer. I would highly recommend you learn jQuery.
jQuery makes it easy to manipulate the HTML and CSS from Javascript - which you'll need to do in order to show/hide the content and the forms for editing the content (or otherwise manipulate the code on the page in order to achieve what you want - there are various ways to do this, adriano's comment on your question lays out a good solution).
The specific part about sending such requests in the background is called AJAX, and jQuery has support for that too.