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.
Related
I want take list of purchased products. Unfortunately there are no product details on my "order-received" page. Can I get product details from the previous page using GTM?
Order-received Page
I have product details on a previous(basket) page:
function printOrderItems() {
var hrefs = document.querySelectorAll("#form_cart > table > tbody > tr > td.product-info > a");
var result = [];
hrefs.forEach(function(t) {
result.push(t.text)
});
return result;
}
previous page
this is being created when a customer chooses to make an order correct? could you not, using a jquery click event, send that information via an ajax and then load your order received page dynamically from a handler?
In case you still need an answer: Use a custom HTML tag to extract the products on the basket page and store the result in sessionStorage. SessionStorage accepts only a string, but you can use JSON.stringify to convert the array of product names into a string.
On the 'order-received' page use a variable of type Custom JavaScript to retrieve the products from sessionStorage. Use JSON.parse to convert the string back to an array. Then you can use this variable in any GTM tags that you want to run on that page.
Note though that sessionStorage is only available within the same subdomain and within the same tab. If that is an issue you could try to use a session cookie to persist the data from one page to the next. However, cookies are limited in size and therefore are not really suitable for persisting a potentially long list of product names.
I have faced a hurdle regarding the localstorage get and set.
Scenario: I am inserting data from form elements and caching it in an object and this object is pushed inside an array. So every time I am entering data into form elements those data are stored in an object and that object is pushed in an array. After pushing the object in the array userAry.push(newUser).
I have setItem the array in localstorage
localStorage.setItem('userDataStore',JSON.stringify(userAry))
Inside document.ready I have
$('#getResult').html(localStorage.getItem('userDataStore'))
Problem:
Inside document.ready the $('#getResult').html(sessionStorage.getItem('userDataStore')) is not showing the array. Instead it is only showing the recently added data.
If I fill up the form twice consecutively then after page refresh it is showing those 2 data. But if I add another data and refresh the page it should show 3 data instead it is showing the recently added data.
Code:
var newUser = {
userName : username,
userPhno : userphno,
userEmail : useremail,
userPass : userpass,
userConfirmpass : userconfirmpass,
}
userAry.push(newUser);
localStorage.setItem('userDataStore',JSON.stringify(userAry));
Inside document.ready I have
$('#getResult').html(sessionStorage.getItem('userDataStore'));
#NoviceCoder, To work with localstorage you can try below scenerio.
response = ['A', 'B', 'C', 'D'];
localStorage.setItem("marketPlaceNames", JSON.stringify(response)) // to set value
JSON.parse(localStorage.getItem("marketPlaceNames")) // to get value
in document ready, you should set up variable userAry too. Not only fill the HTML content. then when you push a new item it will add it to the others already created and then when you store the array, you store whole users not only newly added
userAry = sessionStorage.getItem('userDataStore');
$("#getResult").html(userAry);
In your code replace this line localStorage.setItem('userDataStore',JSON.stringify(userAry)); with sessionStorage.setItem('userDataStore',JSON.stringify(userAry));
Check it below code how to get, set and remove data from sessionStorage.
For example :
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');
// Remove saved data from sessionStorage
sessionStorage.removeItem('key');
// Remove all saved data from sessionStorage
sessionStorage.clear();
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.
Using JavaScript I managed to add a variable to a page and used $_GET on the new page to use the variable to perform queries. This first implementation worked fine as I was only using one variable. However I need to use two variables now and I'm running into some problems while doing it. If I combine both variables in the first page like shown below, the values are mixed up where my db value goes to my table id.
window.location.assign("test.php?db=&tbl=" + yourDB);
I tried putting both IDs only in my new page and using reload as my DB value would already have been passed. Using
window.location.reload("test.php?db=&tbl=" + yourTbl);
But this doesnt work either.
How can I get the url to have both my DB and table in the correct format? Like
test.php?db=test&tbl=customer
EDIT
yourDB variable is passed from a select form option from a different page which in turn opens the new page where the yourTbl variable exists.I can't therefore call yourDb
window.location = 'test.php?db=' + yourDB + '&tbl=' + yourTbl ;
'OP is asking: yourDB since this variable stores the values of select options from a different page.Any ideas'
My answer is 'Get value from selection menu list in the another page, and save this value into local storage or session storage.'
Something like this,
// save your db
window.sessionStorage.setItem("db", yourDB)
// get your db
var obj = window.sessionStorage.getItem("db");
I have two list boxes. One is populated on Page_Load and the other remains empty.
The user has buttons for adding users from the first list to the second list and back.
When the form is submitted, the second list is empty, like it was when it was sent to the client. Here is the JS code:
function add() {
$('#AvailableUsers option:selected').appendTo('#SelectedUsers');
}
function addall() {
$('#AvailableUsers option').appendTo('#SelectedUsers');
}
function remove() {
$('#SelectedUsers option:selected').appendTo('#AvailableUsers');
}
function removeall() {
$('#SelectedUsers option').appendTo('#AvailableUsers');
}
How do I bring the client-side changes back to the server side?
Edit: Code for server-side:
bool canDismiss = chkCanDismiss.Checked;
string messageText = tbMessageText.Text;
PaymentsDataContext db = new PaymentsDataContext();
foreach (ListItem li in SelectedUsers.Items)
{
UserMessages newMessage = new UserMessages();
newMessage.userName = li.Text;
newMessage.messageText = messageText;
newMessage.dismissed = false;
newMessage.canDismiss = canDismiss;
db.UserMessages.InsertOnSubmit(newMessage);
}
db.SubmitChanges();
You have to append/store those items in the hidden field as well, then you can get the items from the hidden field on the server side.
This is because the changes you made at client side are not available on the server side.
If I read correctly you are trying to use the Users in "Selected Users" Server side. I would have an on form submit client side event that selects all the users in the SelectedUsers list. This eliminates the need for a hidden variable. NOTE use the following in conjunction with your existing jQuery
$(document).ready(function(){
$(form).submit(function(){
$('#SelectedUsers option').attr("selected","selected");
return true;
});
});
EDIT In response to comment: When the selected users control is originally loaded on the page there are no items and nothing selected. With your current code, options are added to the selected users list, on the client side. Currently when the form is submitted these values are not selected and therefore not posted back to the server. To post the values back to the server they need to be selected first. What the above code should do is select the users options in the SelectedUsers list and post the selected values, with the rest of the form, back to the server when the form is submitted.
Edit 2, Server Side Code: You may need to access the values via the Request.Form object. With multiple controls like multiple select boxes, multiple values are passed as a comma separated string.
string rawSelUsers = Request.Form[SelectedUsers.ClientID];
You can the perform a split on this string to break it into an array if needed.