0

I have an order page where user select item(radio button) and quantity)text box),and the values can be stored by using local storage after data validation, and then when the user: 1. clicks on add to cart button the value of item+quantity should get added to listbox in shopping cart page 2.clicks on Go to cart button i.e goes to shopping cart page and come back those previously entered values are still there in order page.

Any advice on how to do this would be really great! Here's the code that I have currently:

HTML

Types of items Pens Books Quantity

Cart html page

<form name="items">
            Items <SELECT name="item_list" id="item_list">
                <option value=""></option>
            </SELECT>

        </form>
        <form id="gotoorder" name="gotoorder" method="get" action="orderform.html">
        <input type="button" value="Order page" onclick="location.href='orderform.html'">
        </form>

Javascript/Jquery

$(document).ready(function() {
    // add span element after each input element
        $(":input[type=text]:not([readonly='readonly'])").after("<span>*</span>");
        // move focus to first text box
    $("#items").focus();
        // the handler for the click event of a submit button
    $("#orderform").submit(
        function(event) {
            var isValid = true;
         //validate quantity
                     var qty=$("#qty").val();
                     if (qty == "") {
                $("#qty").next().text("Please enter quantity");
                isValid = false;
            }
                        else {
                $("#qty").next().text("");
            }
            //storing quantity value to local storage
             localStorage.setItem("Quantity", document.orderform.qty.value );            
        //submit the form if all entries are valid 
               if (isValid == false) {
                event.preventDefault();
                                localStorage.clear();
            }
                }
                );

        });
//retrieving quantity value to local storage
var qtyval=localStorage.getItem("Quantity");
document.orderform.qty.value=qtyval;

1 Answer 1

0

You can use HTML5 methods to store data in the localStorage (more here on w3school ) :

HTML5 Web Storage provides two new objects for storing data on the client:

window.localStorage - stores data with no expiration date
code.sessionStorage - stores data for one session (data is lost when the tab is closed)

Before using web storage, check browser support for localStorage and sessionStorage:

if(typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

The methods are listed below :

setItem(key,value) : stocks a key/value pair
getItem(key)  : returns the value associated with the key
removeItem(key) : delete the corresponding pair via the key name
key(index) : returns the key in stock at this index
clear(): clears all pairs

Use :

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); 
5
  • i tried using local storage but still it doesnt work. Jul 10, 2014 at 22:02
  • What i am trying to do is,i have a order form(html page 1) where i enter quantity and select type of good from radio button and store these two values in local storage.I have a button add when clicks should populate these values to the next page listbox i.e in checkout page(html page 2). Jul 10, 2014 at 22:04
  • //save local storage function save(){ var it=document.getElementById("items"); var q=document.getElementById("qty"); localStorage.setItem("items",it.value); localStorage.setItem("qty",q.value); it.value=""; q.value=""; } //retrieve from local storage function get(){ var it=document.getElementById("items"); var q=document.getElementById("qty"); it.value=localStorage.getItem("items"); q.value=localStorage.getItem("qty");; } Jul 10, 2014 at 22:07
  • Here is your working Fiddle, all you have to do is adapt it to your code. Whenever you change the selected value is stores the new value in the localStorage, when you click the button is shows you what value is stored in the localStorage. Works if you load the value from another page. Jul 11, 2014 at 8:41
  • You are welcome, I'm glad it helped ! Just validate my answer then, in order for the others to know that this fitted your needs Jul 22, 2014 at 7:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.