Search code examples
javascriptjqueryhtmljsonsession-storage

javascript condition for session storage not working as expected

Currently working on session storage where user have to select one radio button from the first page and click next button div has to show in the second page in the first page i have created a function with set of objects where the data will be stored using set item in the second i am trying to get those value using get item.

I have two scenarios

  1. When the user select pg radio button from the first radio group and if any location like alain / abudhabi if user select alain | abudhabi from the location from location then user slect DIP EDU if user click submit button then in the second page i need to get one check box and create application button the rest should be hide -- With my code this was working
  2. If the user select ug radio button from the first radio group and if any location like alain / abudhabi if user click submit button then in the second page I need to get Just a Pay button but this was not working kindly help me

Here is my plunker link just like fiddle

This is what my code for to get the item from the first page

function storedata(){
    var storeDate = {};
    storeDate['storedValue1'] = $('input[id=pg]:checked').val();
    storeDate['storedValue2'] = $('#alain').prop('checked'),$('#abudhabi').prop('checked');
    storeDate['storedValue3'] = $('#slt_mjrpg option:selected').val("Dip - Prof. PG Dip in Teaching");

    sessionStorage.setItem('storeDate', JSON.stringify(storeDate));

}

function storedata1(){
    var storeDate1 = {};
    storeDate1['storedValuej'] = $('#slt_mjr option:selected').val("Bachelor of Arts in Persian").text();
    sessionStorage.setItem('storeDate1', JSON.stringify(storeDate1));
    console.log(storeDate1);

}

When i checked in session storage I am getting the storedValue2 as false

enter image description here

After providing or in this line 

storeDate['storedValue2'] = $('#alain').prop('checked') || $('#abudhabi').prop('checked');

I am getting true in the storedValue2 = true but my output was not working as expected

enter image description here

In the second page

var otherObj = JSON.parse(sessionStorage.getItem('storeDate'));
var otherObj1 = JSON.parse(sessionStorage.getItem('storeDate1'));
if (otherObj.storedValue1 && otherObj.storedValue2 && otherObj.storedValue3 != "pg") {
    $(".pay_check,.pay_click").show();
    $(".pay_trans").hide();
} else if (otherObj1.storedValuej === "BAP") {
    $('.create_btn,.no_applica').show();
    $('.pay_btn').hide();
} else { * * // I have tried using like this but no use**
    //$('.create_btn,.no_applica,.pay_click').hide();
    $('.pay_btn').show();
}

any suggestion guys for the question

Kindly please guide me where I am doing wrong. Thanks in advance

Solution

  • Okay so you have a number of problems here. Mostly due to a misunderstanding of functions.

    First of all, we can change

    storeDate['storedValue1'] = $('input[id=pg]:checked').val();
// to
storeDate['storedValue1'] = $('#pg').val();

    The $ function provided by jQuery selects elements based on a given selector. So $('#pg') selects the element with the id pg. Then val() returns the value of the element.

    Secondly, we need to change 

    storeDate['storedValue2'] = $('#alain').prop('checked'),$('#abudhabi').prop('checked');
// to
storeDate['storedValue2'] = $('#alain').prop('checked') || $('#abudhabi').prop('checked');

    You're just misunderstanding boolean operators here. a || b resolves to true if a or b resolves to true.

    And finally the worst offender

    storeDate['storedValue3'] = $('#slt_mjrpg option:selected').val("Dip - Prof. PG Dip in Teaching");
// to
storeDate['storedValue3'] = $('#slt_mjrpg).val();

    val returns the value of an element. In the case of a select, it will return the value of the selected option. Providing a string parameter will set the value. So what we're doing instead is just getting the value, and we'll check the value later.

    In your hide/show function, we don't need to change very much. We're just going to move that inappropriate val parameter down here in an equality operation to get a boolean value.

    if (otherObj.storedValue1 && otherObj.storedValue2 && otherObj.storedValue3 === "Dip - Prof. PG Dip in Teaching")