I have a form which contains radio check and dropdown menu after selection and check data goes to local storage and there is button for update when click it back again to the form again filled by data from local storage but I can't make the radio check be checked according to data also the option not select in the selected menu. code should be in JavaScript only
<select class="country" >
<option value="0">Choose Your Country</option>
<option value="1">UAE</option>
<option value="2">USA</option>
<option value="3">UK</option>
</select>
<p id="type">Gender:</p>
<input type="radio" value="male" name="gender" class="gender">
<label for="male">Male</label>
<input type="radio" value="female" name="gender" class="gender">
<label for="female">Female</label>
For checkbox
let checkboxes = [checkboxOne, checkboxTwo, checkBoxThree];
let checkboxLabels = [labelOne, labelTwo, labelThree];
for (let i = 0; i < checkboxes.length; i++) {
if (window.localStorage.getItem('checkboxValue') === checkboxLabels[i].textContent) {
checkboxes[i].setAttribute('checked', 'checked');
}
}
For drop down
let options = [optionOne, optionTwo, optionThree];
for (let i = 0; i < options.length; i++) {
if (window.localStorage.getItem('dropdownValue') === options[i].value) {
options[i].setAttribute('selected', 'selected');
}
}
Instead of putting elements inside arrays, you can use querySelectorAll
let checkboxes = document.querySelectorAll('#form input[type="radio"]');
You can access localStorage on windows object. And change values using queryselectors or pass a function to the value.
document.querySelector(<selector>).<propperty you want to set> = window.localStorage.<value tou want to retieve>