I need to know how I can show the input data of a form after a user presses the back button.
Here is the working jsfiddle
I created a simple asp page.
If I click next after entering some input value, it will go to next page, and again I click back, it doesn't show entered input values.
$("#form").submit(function() {
var inputs=$('.input');
for(i=0;i<inputs.length;i++)validateEmail(inputs[i]);
if($('.invalid').length!==0)return false;
});
I need to show those values. How can I achieve this? Thanks in advance!
Note: In my jsfiddle didn't include next page action.
You have several methods, althought I'm not a big fan of cookies because they are not so smart to manage.
You can either use:
The localStorage API, if you want your values being saved until the user clears the cache, like this:
var myValues = [];
for(i=0;i<inputs.length;i++) {
validateEmail(inputs[i]);
myValues.push(inputs[i].value);
}
// Save them fot later use
localStorage.myValues = JSON.stringify(myValues);
// After clicking the button you can retrieve them back
var oldValues = JSON.parse(localStorage.myValues);
The sessionStorage API, which lives for the current session of the browser (i.e. when the user closes the browser it gets deleted):
var myValues = [];
for(i=0;i<inputs.length;i++) {
validateEmail(inputs[i]);
myValues.push(inputs[i].value);
}
// Save them fot later use
sessionStorage.myValues = JSON.stringify(myValues);
// After clicking the button you can retrieve them back
var oldValues = JSON.parse(sessionStorage.myValues);
NOTE: I'm using JSON.parse and JSON.stringify because both storage objects (local and session) can only store data in string format.
Related
I have a requirement that on refresh the data should stay the same which we are calling from spreadsheet (data in spreadsheet can change due to which User view of his data should not change)
User first inputs his value, the value submits to the spreadsheet where there are some formulas which computes the data and gives the output in webapp.
Hence, if any other user is submitting input at the same time(from webapp) then It may change the output of the first user so we have to save the ouutput of the first user in another sheet which may work as data base. However How can I call the values from the data base and URL should remain the same with uniquue value like timestamp?
In order to have your webapp updated, you should add an auto-refresh function in the JS file.
Example :
function auto_check() {
google.script.run.withSuccessHandler(putData).askData();
window.setTimeout(auto_check, 3000); // every 3sec
}
//function with returning values to update the webapp
function putData(e) {
$('#elem_to_update').html(e.new_value);
}
//in order to start the autocheck as soon as loaded
window.onload = function () {
auto_check();
}
If this is not the result you need, please provide more infos of your issue
Ok so I have this code that allows me to redirect the users on my current page to any other page when they click the back button
The code works fine but now I would like to pass the URLs parameters from the previous page to the redirected page so for example. Lets us say that the main page the user is on is www.example.com/ready&val=1&base=2&timeid=3&rfid=4
I would like the &val=1&base=2&timeid=3&rfid=4 passed on to the end of the domain that the user is being redirected to when they click the back button
<script type="text/javascript">
!function(){
var c_link = "www.example.com/time";
var t;
try{
for(t=0;10>t;++t)history.pushState({},"","#");
onpopstate=function(t){t.state&&location.replace(c_link)}}
catch(o){}
}();
</script>
So the user gets to www.example.com/time I would like the &val=1&base=2&timeid=3&rfid=4 to be and the end of it.
I would not use HTML5 history.pushState for this as it is not supported for IE9 and previous versions. But I can give you a better solution. You can use sessionStorage and performance.navigation.type.
sessionStorage is a storage type like localStorage but it only saves your data for the current tab.
Session storage can be used like this.
sessionStorage.setItem('key', 'value'); //saves the value
sessionStorage.getItem('key'); //gets the saved value
performance.navigation.type is the browser is the variable that hold users navigation info.
if(performance.navigation.type == 2){
//User is coming with back button
}
With the information above we can solve your problem easily.
Script on next page
var values = {
val: 1,
base: 2,
timeid: 3,
rfid: 4
}
sessionStorage.setItem('returnData', JSON.stringify(values))
Here is our main page.
if(performance.navigation.type == 2){
var backValues = JSON.parse(sessionStorage.getItem('returnData'));
//Do whatever you need with backValues
}
var c_link = "www.example.com/time&val=1&base=2&timeid=3&rfid=4";
Please try to pas the value through the url itself.
I am storing the values in localStorage and the values are getting stored through input[type:hidden] and input[type:text].
JS:
$('.proceed_btn').on('click', function() {
// Blank to start with
var order = {};
// Loop through all inputs...
$('input[type="text"], input[type="hidden"]').each(function() {
// ...adding their values as properties
order[this.name] = this.value;
});
// Store that object in JSON format
localStorage.setItem("order", JSON.stringify(order));
});
I want to print these value in other page when the user redirects after submitting the form. I am working on ruby currently. There are many products in the website, so the information in the summary page gets rendered according to that. Is there any way to display specific form details in through there id's?
You can create a partial with .js.erb extension eg _order_partial.js.erb and retrieve the order object as thus:
order = JSON.parse(localStorage.getItem("order"));
// Loop through the object and print out
Then you can render the partial in any of the views file you want to use it.
Ok... so a user enters info into the journal field and hits submit, and a function gets called on the information they have submitted, which I call changeTextComment(). That function calls another function and so on as the info is formatted and placed in the cue, as in a Facebook commentary.
I need this information saved so it can be recalled later, in local storage, making the app not refresh every time I restart it. So...
<script>
function appCache() {
// Check browser support
// this is experimental for local storage...
more here: http://www.w3schools.com/html/html5_webstorage.asp
if (typeof(Storage) != "undefined") {
localStorage.setItem(para);
// Retrieve
document.getElementById("journal").innerHTML = localStorage.getItem(para);
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
};
</script>
So looking at the appCache function it seems like it might work except I need to identify what the key variable is that will be stored and then retrieved.
I think this is the variable userInput, as any time the user hits the 'add to journal' button this variable is used to store the user input and then put into the changeTextComment() function.
I am wondering if this is the simplest way to deal with this whole thing... I do not yet understand databases, but wondering if that would be easier to learn.
In this case, I would add the function Appcache() to the function changeText() such that it caches the variable and then how would I set it up to then feed the value of the variable's cached info into changeText() upon launch of the app?
Every submission to the journal will have a unique value.
Heres the ChangeTextComment() Function... still sorting out how to use classes in css to simplify these functions:
function changeTextComment(){
// to be modified from the above to change the location of the dump
var userInput = document.getElementById('userInput').value;
// get the input from the user
var panel = document.createElement("div"); // create a parent divider for everything
// assignment of attributes
panel.setAttribute("class","panel panel-default panel-body");
panel.setAttribute("id","panelBody");
var para = document.createElement("P");
var t = document.createTextNode(userInput);
para.appendChild(t);
// add comment area
var c = document.createElement("INPUT");
c.setAttribute("type", "text");
c.setAttribute("id", "comment");
c.setAttribute("placeholder", "comment here");
c.setAttribute("class", "form-control input-lg");
// add comment button attempt -- success <> now try to put it in the textarea
var d = document.createElement("INPUT");
d.setAttribute("type","button");
d.setAttribute("class","btn btn-info active pull-right");
d.setAttribute("onclick","commentThis()");
d.setAttribute("value","Add Comment");
panel.appendChild(para); // this is where a comments piece would go
// place the item
var destination = document.getElementById("journal")
//destination.insertBefore(Commentaryarea, destination.firstChild);
//destination.insertBefore(panel, destination.firstChild);
destination.insertBefore(panel, destination.firstChild);
panel.appendChild(c);
panel.appendChild(d);
document.getElementById("userInput").value = "";
document.getElementById("userInput").focus();}
</script>
<script>
function setText(a){
document.getElementById("userInput").value = a
document.getElementById("userInput").focus();
}
</script>
When you say "stored locally", do you mean stored in the visitors browser, i.e. with only themselves being able to see it and retrieve it? Or do you want other users to be able to see the data, and/or the commenter to be able to see it if they log in later from another location?
If it's the latter then you need to store it on the server side, and you're going to need a database for that. If all you need is to store journal entries then mongoDB is easy to set up with javascript, but if you have a lot of relations (journal entries being associated with users, comments on entries being associated with users and entries, ect) then perhaps an SQL database would suit you better.
I'm building an image gallery on WordPress and I want to add a save to lightbox or save to collection function so that I can collect images with a click of a button and then download all images as a zip later. It sorta like a shopping cart without actually buying the stuff that you want. I want it just to be a per session kind of thing so that you don't need to register to the site.
So on my images page, I put a Save to lightbox button and I want to save the ID of this image to a cookie and then I keep adding images to it until I'm done and will click a view lightbox button that will list all of my collected images.
I know how to set a cookie but I don't know how to append values to it.
function saveLightbox(ID){
$.cookie('the_cookie', ID, { expires: 7 });
document.getElementById("result").innerHTML = $.cookie('the_cookie');
}
Here's fiddle of roughly how I want it to work.
To append values to the jQuery cookie, first of all you have to enable the storage of objects. Then you initialize a variable holding the content of the cookie. If the cookie is empty then initialize an empty array. Next, you push the ID to the array. Finally, you store this array in the cookie.
The following code illustrates what it is said above:
function saveLightbox(ID){
$.cookie.json = true;
var idContainer = ($.cookie('the_cookie')) || [];
idContainer.indexOf(ID) === -1 && idContainer.push(ID);
$.cookie('the_cookie', idContainer, { expires: 7 });
document.getElementById("result").innerHTML = $.cookie('the_cookie');
}
Another thing to consider, is that once an ID is already stored in the cookie you might want to prevent adding it again, that is the reason for line 4. You can find the working example here: jsfiddle.
save an array and push id's to that array:
var ids = $.cookie('the_cookie') || [ ];
function saveLightbox(ID){
$.cookie('the_cookie', ids.push(ID), { expires: 7 });
console.debug(ids);
console.debug($.cookie('the_cookie'));
document.getElementById("result").innerHTML = JSON.stringify($.cookie('the_cookie'));
}
(can't test or demonstrate atm, jsfiddle is not available (for me).)