Laravel session storage jquery - javascript

I have multi paged form. And have to save inputs to cookie. and if i press next or previous button. I have to retrieve session dataHow to save each inputs value to session and retrieve them. And how to show back them each input.
Javascript
$.each($('input[type=number]'),function(){
alert($(this).val());
});
i think its gonna be like
sessionStorage.setItem('1',input1);
sessionStorage.setItem('2',input2);
sessionStorage.setItem('3',input3);
sessionStorage.setItem('4',input4);

Neither is particularly appropriate. Either send the form's data to the server when a page is submitted, and keep it saved until the whole form is submitted, or use localStorage to save data over pageloads.

Related

Storing data in cookies,client side verification

I have created a registration form.i have set the cookies,now my question is, when i click on submit button,all the details which user has given has to be stored in the next page using cookies.how do i proceed.
You can handle form submit and store all the details which user has given into cookies.
forms.addEventListener("submit", function() {
// Handle your data and store them in cookies then you can use them in next page
});
Hope you only use this for learning or development purposes, this is not a good way to handle a registration form!
Rather than cookies I prefer localStorage.
you can just store user token in localStorage using setItem() method and delete data for logouts using removeItem(). If you want to see if token is still there in localStorage you use getItem() method.

Display text input from form on another file

what i am trying to do is to have one file with forms that can be filled out, some sort of setting page. When the form is filled out id like to display the input in another file. So one page to put the input and another one to display it.
I already tried to do it with .getElementById, it worked in the sense that i could display the input but only on the same page.
Thank you for your help
From what you have mentioned, you can use WebSockets . You cannot use selectors that are in a different page.
When you fill the form, send a message to server and then the server can emit the message. Just like a chat room.
You can use session variables to do that.
For example Once the form is filled user clicks on the submit button, that will sent the form elements (e.g.name,number,text,etc.) to the session variables using POST method.
And the session variables are accessed,modified throughout the session.
You can store form info into the browser local storage
localStorage.setItem('key', 'value') to create or modify data
localStorage.getItem('key', 'value') to access data
localStorage.removeItem('key') to delete data
localStorage.clear() to delete all data

Save data entered in the fields of an html page when connection to server is lost

If we have an online form to be filled(an application form), an html page and the fields are filled with data and save button is clicked at that very moment the connection to server is lost. How can we preserve the data which was fed in the fields of the html page?
You can store data in localStorage.
localStorage.setItem("someItemName", "Value");
On page load you could check to see if there is any data in localStorage with:
var yourdata = localStorage.getItem("someItemName");

How to maintain the page state when browser back button is clicked?

I have a page with Client side paggination and Filtration. The page lists around 200-300 prouducts.
The page contains some filters like Category,Manufacturer and Weight.
Clicking upon any of the page number or filter, I am manupulating the page content on client side using Jquery.
Everything is working fine till this step. Now there is a usecase where I am facing problem.
Lets say a user comes to our product listing page and click on some of the filters and gets a list of products.
Now he clicks on a particular product , which redirects him to the product page to view the details of the product.
But now when the user clicks on the back button , the user gets the page with the intial state without any filter selected.
Is there any way user will get the page with the filters previously selected on clicking the back button?
You can use some of the following to store data across multiple pages.
Store data in cookies.
Store data in local storage.
Store data in the session on the server.
Make the data part of your URL (use hash or query string for the filter parameters). Note that changing query string causes page reload.
If using cookies, local storage, or hash, you'll need to add JavaScript code to your page that loads and applies the stored data on page load.
There is a number of ways to do this:
If you are dealing with html5 history and a single-page application, then you are not reloading the page. But based on your question, I assume this is not what you are dealing with.
Store something in the URL. For an example of this, look at the filters on TotalHockey, e.g. http://www.totalhockey.com/Search.aspx?category_2=Sticks%2fComposite%20Sticks&chan_id=1&div_main_desc=Intermediate&category_1=Sticks so when you go backwards, the URL contains the entire state.
Use localstorage, if you have a browser that supports it.
use cookies with the $.cookie API
Store it on the session in the server.
You can store the Search Filter Data in session just after submitting on the filter input and on each ajax request (Loading your product listing), you can check the search filter inputs stored in the session and show the data according to them. If search session is empty then show whole listing.
You can also store the full ajax request URL (if GET method is used) in the session after searching the record and hit that particular URL again after coming back from product detail page.

File Upload and Cookie

Hello I am working on multi step registration form and it contains file uploads in the intermediate step . I am storing each value in the form in the cookie to work it with browser back button and and reset the same in the final form which i want to post at the. But how to store the file upload in the cookie so that i can set it when user clicks on a browser back button. Also i need to submit it along with the final form.
You can't store a file in a cookie, you are going to have to store it on the server and keep a reference to the server within the cookie if you want it to work as you describe.
Something you could do is keep the entire form on one pageload and swap the content of a div dynamically. That way you could just hide the form elements you don't need, including the file form. A submit button at the end would take all the hidden inputs, with the file and post them all to the server.

Categories