James Allan James Allan - 1 month ago 10
jQuery Question

how to save all dropdowns values from php foreach loop in local storage?

In my cart i have my products added, there are stored in sessions.

enter image description here

I want to store my selected option from all dropdown when the page is refreshed.

I need to refresh my page so my sessions can be updated so i can post in my database all the updated values.
What is wrong...

if i select an option for the first row of my product it saves in local storage.but when i select another product option from other row,it overwrites the local storage,so my local storage is saving only one option,and when selected other option from other products it is rewriting my only one save option in local storage.i have to save multiple option.

Without refresh what happens is...

lets say that i've selected 1 cushion in my gallery.

So in my cart this cushion will be 1 product, and if i add two more by clicking plus button and then click on confirm order,it will post in my DB the value of 1.

But not 3.
So my page needs to refresh, so for that i need to save all dropdown selection so i can refresh the page.

So far i tried to save it,but it saves the first row of my cart.
This is what i tried...

$(function() {
if (localStorage.getItem('fabric')) {
$(".fabric option").eq(localStorage.getItem('fabric')).prop('selected', true);
}

$(".fabric").on('change', function() {
localStorage.setItem('fabric', $('option:selected', this).index());
});
});

$(function() {
if (localStorage.getItem('size')) {
$(".size option").eq(localStorage.getItem('size')).prop('selected', true);
}

$(".size").on('change', function() {
localStorage.setItem('size', $('option:selected', this).index());
});
});


this is my foreach loop if needed to understand it better.

this script below is not important for this question,but it shows how i am handling my dropdowns to make ajax get values based on dropdown selection using data attribute.

script that gets cost and subtotal

Answer

Ok... Took a liitle time, but you will like my solution (I think).

We have to set storage row by row...
So an .each() loop has to be done on product rows.
We use the index of the .each() as a part of the storage name to ensure no overwriting.

Given this HTML that I made just for this example:

<div class="row">
    <!-- other elements like img etc... -->

    <select class="fabric">
        <option>jeans</option>
        <option>leather</option>
        <option>cotton</option>
    </select>

    <select class="size">
        <option>small</option>
        <option>medium</option>
        <option>large</option>
    </select>

</div>

<div class="row">
    <!-- other elements like img etc... -->

    <select class="fabric">
        <option>jeans</option>
        <option>leather</option>
        <option>cotton</option>
    </select>

    <select class="size">
        <option>small</option>
        <option>medium</option>
        <option>large</option>
    </select>

</div>

Here is the script:

$(function() {

    $(".row").each(function(index){

        // Fabric selection
        if (localStorage.getItem('row_'+index+'_fabric')) {
            $(this).find('.fabric option').prop('selected', false).eq(localStorage.getItem('row_'+index+'_fabric')).prop('selected', true);
            console.log("Row#"+index+" get-fabric: "+localStorage.getItem('row_'+index+'_fabric'));
        }

        $(this).find(".fabric").on('change', function() {
            localStorage.setItem('row_'+index+'_fabric', $(this).find('option:selected').index());
            console.log("Row#"+index+" set-fabric: "+$(this).find('option:selected').index());
        });


        // Size selection
        if (localStorage.getItem('row_'+index+'_size')) {
            $(this).find('.size option').prop('selected', false).eq(localStorage.getItem('row_'+index+'_size')).prop('selected', true);
            console.log("Row#"+index+" get-size: "+localStorage.getItem('row_'+index+'_size'));
        }

        $(this).find(".size").on('change', function() {
            localStorage.setItem('row_'+index+'_size', $(this).find('option:selected').index());
            console.log("Row#"+index+" set size: "+$(this).find('option:selected').index());
        });
    });
});

Try it on this CodePen!
(Change the selects and hit "Run" to refresh)

Comments