In my application I have a form that initially has default values. The user can choose other selections in the form. The user can also save the selections into localStorage by clicking the Save button and using the CacheData() function. My application has an option to navigate to another page once the form selections are made. Upon leaving the initial page, the form data is saved once again using CahceData(), incase the user made any changes without saving before navigating. From the second page, upon returning to the original page, the application reloads the form with the function dataLoad() with the selections saved.

My form has three sections set up as ‘s, Location, Date and Prayers. Each fieldset is made essentially a set of radio buttons. For example, in Location the radio buttons are Auto, City, and Manual. Under the City radio button, I have a selection input, and a checkbox for Daylight Saving. Under the Manual radio button there is there are two number input fields and under each number input field two more radio buttons. The form code is below.

<form id="formSettings" class="dropdown contents" autocomplete="on" target="hiddeniFrame">
                <script> // this script formats the dropdown menu of the form when the settings button is pressed
                var coll = document.getElementsByClassName("options");
                var i;
                for (i = 0; i < coll.length; i++) {
                  coll[i].addEventListener("click", function() {
                    this.classList.toggle("open");
                    var content = this.nextElementSibling;
                    if (content.style.display === "grid") {
                      content.style.display = "none";
                      //content.style.overflow = "hidden";
                    } else {
                      content.style.display = "grid";
                      content.style.background = "#457900";
                        content.style.maxWidth = "inherit";
                        content.style.color = "#000";
                        content.style.fontSize = "25px";
                        content.style.fontFamily = "brioso-pro-display, serif";
                        content.style.padding = "10px";
                        content.style.border = "#000 1px solid";
                        content.style.borderRadius = "20px";
                        content.style.textAlign = "center";
                        content.style.justifyContent = "center";
                        content.style.gridTemplateColumns = "1fr 1fr 1fr";
                        content.style.gridTemplateRows = "auto";
                        content.style.gridColumn = "1/3";
                        content.style.gridRow = "2/3";
                        //content.style.button.border ="#000 2px solid";
                        //content.style.button.borderRadius = "15px";
                        //content.style.button.fontFamily = "brioso-pro-display, serif";
                        //content.style.button.fontSize = "20px";
                        //content.style.button.color = "black";
                      //content.style.overflow = "visible";
                    }
                  });
                }
                </script>
                <fieldset class="locfield">
                    <legend>Location<br></legend>
                    <input type="radio" name="location" value="auto" id="autoloc" checked><label for="autoloc"> Auto</label><br><hr class="settingsDivider">
                    <input type="radio" name="location" value="city" id="cityloc"><label for="cityloc"> City</label><br>
                    Select City:<br>
                    <select name="cities" class="locinput" style="width:6em">
                        <option value="0" selected>U.S. Cities</option>
                        <option value="1">Albuquerque, NM</option>
                        <option value="2">Anchorage, AK</option>
                        <option value="3">Atlanta, GA</option>
                        <option value="4">Austin, TX</option>
                        <option value="5">Birmingham, AL</option>
                        <option value="6">Bismark, ND</option>
                        <option value="7">Boston, MA</option>
                        <option value="8">Boulder, CO</option>
                        <option value="9">Chicago, IL</option>
                        <option value="10">Dallas, TX</option>
                        <option value="11">Denver, CO</option>
                        <option value="12">Detroit, MI</option>
                        <option value="13">Honolulu, HI</option>
                        <option value="14">Houston, TX</option>
                        <option value="15">Indianapolis, IN</option>
                        <option value="16">Jackson, MS</option>
                        <option value="17">Kansas City, MO</option>
                        <option value="18">Los Angeles, CA</option>
                        <option value="19">Menomonee Falls, WI</option>
                        <option value="20">Miami, FL</option>
                        <option value="21">Minneapolis, MN</option>
                        <option value="22">New Orleans, LA</option>
                        <option value="23">New York City, NY</option>
                        <option value="24">Oklahoma City, OK</option>
                        <option value="25">Philadelphia, PA</option>
                        <option value="26">Phoenix, AZ</option>
                        <option value="27">Pittsburg, PA</option>
                        <option value="28">Portland, ME</option>
                        <option value="29">Portland, OR</option>
                        <option value="30">Raleigh, NC</option>
                        <option value="31">Richmond, VA</option>
                        <option value="32">Saint Louis, MO</option>
                        <option value="33">San Antonio, TX</option>
                        <option value="34">San Diego, CA</option>
                        <option value="35">San Francisco, CA</option>
                        <option value="36">Seattle, WA</option>
                        <option value="37">Washington DC</option>
                        <option value="38" >WORLD CITIES</option>
                        <option value="39">Abuja, Nigeria</option>
                        <option value="40">Algiers, Algeria</option>
                        <option value="41">Ankara, Turkey</option>
                        <option value="42">Baghdad, Iraq</option>
                        <option value="43">Bamako, Mali</option>
                        <option value="44">Beijing, China</option>
                        <option value="45">Berlin, Germany</option>
                        <option value="46">Buenos Aires, Argentina</option>
                        <option value="47">Cairo, Egypt</option>
                        <option value="48">Canberra, Australia</option>
                        <option value="49">Cape Town, South Africa</option>
                        <option value="50">Caracas, Venezuela</option>
                        <option value="51">Damascus, Syria</option>
                        <option value="52">Darwin, Australia</option>
                        <option value="53">Dublin, Ireland</option>
                        <option value="54">Helsinki, Finland</option>
                        <option value="55">Hong Kong, Hong Kong</option>
                        <option value="56">Iquique, Chile</option>
                        <option value="57">Islamabad, Pakistan</option>
                        <option value="58">Jakarta, Indonesia</option>
                        <option value="59">Jerusalem, Israel</option>
                        <option value="60">Kabul, Afghanistan</option>
                        <option value="61">Khartoum, Sudan</option>
                        <option value="62">Kuala Lumpur, Malaysia</option>
                        <option value="63">Lima, Peru</option>
                        <option value="64">London, United Kingdom</option>
                        <option value="65">Madrid, Spain</option>
                        <option value="66">Mecca, Saudi Arabia</option>
                        <option value="67">Mexico City, Mexico</option>
                        <option value="68">Mogadishu, Somalia</option>
                        <option value="69">Moscow, Russia</option>
                        <option value="70">Mumbai, India</option>
                        <option value="71">New Delhi, India</option>
                        <option value="72">Nouakchott, Mauritania</option>
                        <option value="73">Ottawa, Canada</option>
                        <option value="74">Paris, France</option>
                        <option value="75">Perth, Australia</option>
                        <option value="76">Rabat, Morocco</option>
                        <option value="77">Rio de Janeiro, Brazil</option>
                        <option value="78">Riyadh, Saudi Arabia</option>
                        <option value="79">Rome, Italy</option>
                        <option value="80">Singapore, Singapore</option>
                        <option value="81">Sydney, Australia</option>
                        <option value="82">Tehran, Iran</option>
                        <option value="83">Tokyo, Japan</option>
                        <option value="84">Tripoli, Libya</option>
                        <option value="85">Vancouver, Canada</option>
                        <option value="86">Warsaw, Poland</option>
                        <option value="87">Winnipeg, Canada</option>
                        <option value="88">Zürich, Switzerland</option>
                    </select><br>
                    <!--<span><label for="Citydst" style="font-size:15px">Daylight Saving?</label></span><br>-->
                    <label for="Citydst" style="font-size:15px">Daylight Saving?</label><br>
                    <input type="checkbox" name="CityDST" value="DST" id="Citydst"><br>
                    <hr class="settingsDivider">
                    
                    <input type="radio" name="location" value="manual" id="manualloc"><label for="manualloc"> Manual</label><br>
                    
                    Latitude:<br> <input type="number" name="latitude" maxlength="10" class="locinput" style="width:6em"><br>
                    <input type="radio" name="NS" value="north" id="North"><label for="North"> North</label><br>
                    <input type="radio" name="NS" value="south" id="South"><label for="South"> South</label><br>
                    Longitude:<br> <input type="number" name="longitude" class="locinput" style="width:6em"><br>
                    <input type="radio" name="EW" value="east" id="East"><label for="East"> East</label><br>
                    <input type="radio" name="EW" value="west" id="West"><label for="West"> West</label><br>
                    Elevation:<br> <input type="number" name="landelev" class="locinput" style="width:6em"><br>
                    <input type="radio" name="elevunits" value="feet" id="feet"><label for="feet"> Feet</label><br>
                    <input type="radio" name="elevunits" value="meters" id="meters"><label for="meters"> Meters</label><br>
                    Time Zone:<br> <select name="timezones">
                        <option value="-12">UTC-12</option>
                        <option value="-11">UTC-11</option>
                        <option value="-10">UTC-10</option>
                        <option value="-9">UTC-9</option>
                        <option value="-8">UTC-8</option>
                        <option value="-7">UTC-7</option>
                        <option value="-6">UTC-6</option>
                        <option value="-5">UTC-5</option>
                        <option value="-4">UTC-4</option>
                        <option value="-3">UTC-3</option>
                        <option value="-2">UTC-2</option>
                        <option value="-1">UTC-1</option>
                        <option value="0">UTC+0</option>
                        <option value="1">UTC+1</option>
                        <option value="2">UTC+2</option>
                        <option value="3">UTC+3</option>
                        <option value="4">UTC+4</option>
                        <option value="5">UTC+5</option>
                        <option value="6">UTC+6</option>
                        <option value="7">UTC+7</option>
                        <option value="8">UTC+8</option>
                        <option value="9">UTC+9</option>
                        <option value="10">UTC+10</option>
                        <option value="11">UTC+11</option>
                        <option value="12">UTC+12</option>
                    </select><br>
                    <!--<span><label for="Manualdst" style="font-size:15px">Daylight Saving?</label></span><br>-->
                    <label for="Manualdst" style="font-size:15px">Daylight Saving?</label><br>
                    <input type="checkbox" name="ManualDST" value="DST" id="Manualdst">
                </fieldset>
                <fieldset class="datefield">
                    <legend>Date</legend>
                    <input type="radio" name="dateMode" value="auto" id="autodate" checked><label for="autodate"> Auto</label><br><hr class="settingsDivider">
                    <input type="radio" name="dateMode" value="manual" id="manualdate"><label for="manualdate"> Manual</label><br>
                    Select Date:<br>
                    <input type="date" name="dateInput" class="dateinput" style="width:6em"><br><hr class="settingsDivider">
                    <!--<label for="dst" style="font-size:15px">Daylight Saving?</label></span><br>
                    <input type="checkbox" name="DST" value="DST" id="dst"><span style="font-size: 13px">-->
                </fieldset>
                <fieldset class="prayerfield">
                    <legend>Prayers</legend>
                    <!--<span style="text-decoration: underline">Subh Cond:</span><br>-->
                    <span>Subh Cond:</span><br>
                    <input type="radio" name="subhMode" value="12" id="subhurban" checked><span><label for="subhurban"> Urban</label></span><br>
                    <input type="radio" name="subhMode" value="15" id="subhwild"><span style="font-size: 17px"><label for="subhwild"> Wilderness</label></span><br><hr class="settingsDivider">
                    <span class="dhuhurtext">Dhuhur Shadow:</span><br>
                    <input type="radio" name="dhuhurMode" value="42" id="dhuhursandal"><span style="font-size: 15px"><label for="dhuhursandal"> Sandal Strap</label></span><br>
                    <input type="radio" name="dhuhurMode" value="21" id="dhuhurhand" checked><span style="font-size: 17px"><label for="dhuhurhand"> Hand Span</label></span><br>
                    <input type="radio" name="dhuhurMode" value="7" id="dhuhurfoot"><span style="font-size: 17px"><label for="dhuhurfoot"> Foot Span</label></span><br><hr class="settingsDivider">
                    <!--<span style="text-decoration: underline">Asr Shadow:</span><br>-->
                    <span>Asr Shadow:</span><br>
                    <input type="radio" name="asrMode" value="1" id="asrmajority" checked><span style="font-size: 20px"><label for="asrmajority"> Majority</label></span><br>
                    <input type="radio" name="asrMode" value="2" id="asrhanafi"><span><label for="asrhanafi"> Hanafi</label></span><br><hr class="settingsDivider">
                    <!--<span style="text-decoration: underline">Isha Cond:</span><br>-->
                    <span>Isha Cond:</span><br>
                    <input type="radio" name="ishaMode" value="12" id="ishaurban"><span><label for="ishaurban"> Urban</label></span><br>
                    <input type="radio" name="ishaMode" value="15" id="ishawild" checked><span style="font-size: 17px"><label for="ishawild"> Wilderness</label></span><br>
                </fieldset>
                <div class="set-section">
                    <button type="button" name="prayertimes" value=" Save " onclick="saveForm(this.form)">Save</button>
                </div>
                <div class="update-section">
                    <button type="button" name="updateprayertimes" value=" Update " onclick="chooseMethod(this.form)">Update</button>
                </div>
                <div class="reset-section">
                    <button type="reset" value=" Reset ">Reset</button>
                </div>

The problem that I am having, is that if the user selects anything other than the defaults, it seems like CacheData() saves all the selections in the form. Upon reloading the selections into the form, loadData() always ends up checking the default radio button in the list of radio buttons in any given fieldset. For example, in the Location filedset, the default is Auto, but if the user selects City, and selects a city from the selection list, and its saved, up reloading, the selected city is in the selection box, but the radio button that is checked is Auto.

Upon carefully using the debugger in Chrome, I discovered that in loadData() when it cones to the radio buttons, when I assign field.checked = value; the debugger is showing input#autoloc… as the radio button, and not input#cityloc…

How can I specify which radio button needs to be checked, given that I know the value of the radio button named ‘name=location’ but the id is ‘id=cityloc’? Likewise for the other radio buttons.

Is my error in how I save the selections from the form in CacheData() that is it is not specifying the id’s or is it in loadData(), that it is not specifying the correct id’s?

Here are the functions CaacheData() and loadData() that I am using.

function dataLoad() 
        {
            
            if (typeof(Storage) !== "undefined")
            {
                if (localStorage.getItem("formSettings") !== null)
                {

                    var inputParse = JSON.parse(localStorage.getItem("formSettings"));
                    $.each(inputParse, function(key, value) {
                      var field = document.querySelector("[name=" + key + "]");
                      if (field.type == 'radio' || field.type == 'checkbox') {
                          if (field.checked)
                          {
                              field.value = value;
                              field.checked = true;
                          }
                      } else {
                        field.value = value;
                      }
                    });
                }
                
            }
            else 
            {
              document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
            }

function CacheData() 
        {
            alert("in CahceData");
            if (typeof(Storage) !== "undefined")
            {   
                jQuery.fn.serializeObject = function() {
                    var formData = {};
                    var formArray = this.serializeArray();
                    for (var i = 0, n = formArray.length; i < n; ++i)
                        formData[formArray[i].name] = formArray[i].value;
                    formArray = {};
                    return formData;
                };
                var formObject = $("#formSettings").serializeObject();
                console.log(formObject);
                localStorage.setItem("formSettings", JSON.stringify(formObject));
                
                return JSON.stringify(formObject);
            }
            else 
            {
                document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
            }

        }

I was expecting that when the form gets reloaded with loadData() with the selections saved in CacheData() that the correct radio buttons and check boxes would be checked, and input fields and selections would contain those entered by the user.