HTML Forms - Back and Next Buttons - forms

I am building a multi-page form for my website. Each page has several fields and a Back Button and Next Button. The Next Button takes the user to the next page of the form. I have achieved this by adding a input button like <input type="submit" value="Next Step">. The Form action is set to a different php page. A Back button lets user go back to the previous page and make changes if any. For this, I added <input type="button" value="Back" onClick="history.go(-1);">
I have also added header('Cache-Control: max-age=900'); to all my pages. I also use Sessions to store data.
On clicking the back button, I can see all my previously entered text in the first form. But, on clicking the Next button, text entered in the next form disappears.
My question is, how can the user entered data be stored inspite of clicking the Next button. The browser forward button keeps the data though!

I may prefer you to use more elegant way of storing your forms' data by using any kind of local storage api. There is already an api that will do that for you:
Garlic.js
I'm not the developer of this api and I haven't tasted it by myself, but I've seen other people suggesting it to people.

Related

How to store text from field with Google Tag Manager on a form submission

I'm trying to catch email address as a variable with Google Tag Manager (GTM) on signup form submit on http://cloud.feedgee.com/ru/signup and fire a tag with it. On submit, the page is being reloaded.
By now tried to catch it with Form submission by form id set as shown on screenshot) and a Button click as a Custom event with it's click id
I initiated a DOM element variable with Id of the Form text field (Element Id=ContentPlace_loginEmail)
With these settings in Preview mode on Form Submit, I can not see my Tag in "Tags Fired On This Page" row before page reload.
What can be the reasons for this if Id's of the elements are correct?
May it depend on the container script location on the page?
Now It's located right after the HTML tag.
Can I store form text field in a DOM variable to use it in the tag?
If you want to store the email value in your own API, Google Tag Manager is not the right tool for you. You should only use it to track events that fit under Google's terms of use.
Having said that, when you're working with forms in GTM, hold the <shift> key with you click the submit button. If you do that, a new tab will open up, but the current page wont get redirected or refresh. You'll then be able to see what data is being pushed to the dataLayer.

How do I make a link that pre-fills a form checkbox?

I have a page called contact.htm with a working form. One of the checkbox fields on the form is named Garden (so either it is checked or not when using the form).
I have another page that I want to link to my form page, so that if a user clicks a particular link, they are sent to the form page and the field Garden is pre-clicked.
I have not been able to do this though I have tried several methods...such as:
a href="contact.htm?checkbox=Garden,on" or
a href="contact.htm?checkbox=Garden,checked" or
a href="contact.htm?input type="checkbox" name="Garden" value="checked", and some others.
I would appreciate any help.
You'll need to use JavaScript on the target webpage to process the argument and fill the values in. There is no automatic way of doing this just by URL.
This link shows how to retrieve URL arguments from JavaScript. From there, it's a matter of using standard JavaScript or JQuery to fill the values in.

Submit button action

<FORM ID='htmlform' action="" onsubmit="return valforms(this)">
.....
<INPUT TYPE="submit" NAME="submit" VALUE="Submit">
When the user is done filling out the form, and clicks the submit button, I want all of the form information to be sent to me. How do I do this? This is only part of the code, the whole code is too long for me to type in here.
To reply on your question:
Oh, so like the page that emails the data is that an html page that I can have a message saying, "Thank you for your interest, you will hear back from us soon." and then have the page redirect to the home page again? I hope I'm not getting too complicated with this
You're almost right. Let me explain it to you:
the user gets a HTML page that was made in PHP, ASP,.. to fill in
some data in a form
the user fills in the data and clicks a button
The action on the button tells the server to process the page, or have another page to process it. Let's call this page PageX
PageX (written in PHP, ASP,...) will email the data to you
You can also have pageX return some text to the user's browser saying "thank you for your interest,....". You can also make a redirect to another page from this page
Does this answer your question?
The action part of the form element tells the browser what URL to post the information to. You would need to specify some page with some server-side code that would take that information and store it or send it in an email. The onsubmit part of your form element fires a JavaScript event that can be handled on the client's machine. You cannot do much on the client's machine without sending the data back to the server.

iPhone safari asks confirmation to submit form again when back button is pressed

I have a form. When I click on the submit button the form is submitted and result is loaded in the next page. In this page I have a hyperlink. On click of that hyperlink, I am going to another page. At this point if I click 'Back' button of the browser, I get a confirmation whether I should submit the form or not. How do I disable this ? I am storing results in sessionStorage so I do not need to submit form again.
Use the PRG pattern, which can be described as:
Never show pages in response to POST
Always load pages using GET
Navigate from POST to GET using REDIRECT
See http://en.wikipedia.org/wiki/Post/Redirect/Get and links from there

Reload page from CGI?

I have a form that looks like this
<form action="/receiver.pl" method="post">
</form>
Clicking on the submit button doesn't take the user to a new page, because of some JQuery that can be seen here.
Is it possible in receiver.pl to reload the current page?
What receiver.pl is doing is processing some data that is shown on the current page, where the submit button is.
So it would be really cool if the page could be reloaded, so the changes could be seen right away.
Receiver wouldn't do that. What you'd do is this:
jQuery makes an AJAX call to receiver.pl
Receiver.pl does its thing and returns a valid JSON string to jQuery.
jQuery then reloads the page or alters the page based on the content of the JSON results.
The CGI itself cannot reload a page once it's already been loaded.
No. A server side process can only return data to the client. The client has to initiate reloading the page. This would normally happen when the form was submitted, but the JavaScript is intercepting that action and replacing it.
It sounds like the solution is "Remove the JavaScript that is stopping normal form submission".