Search code examples
jquerycookiesjquery-selectorsjquery-cookie

How can I select from cookie correct radio button?


This is how the selection is done with a text field where id of text field is id="abc" and it works correctly

$('#abc').val(getCookie('user_xyz'));

Scenario:

The customer enters his information in the site and proceeds forward. Then the customer clicks on the back button in the browser (I believe something like refresh button) and he wants to see every information in there. Actual result: Everything is filled in except radio buttons Expected result: Everything to be filled in.

<div class="form-group dot-one image-radio-button--joined clearfix">
            <label>Geslacht</label>
            <div class="">
                <input type="radio" data-event-label="man" data-event-action="click" data-event-category="geslacht" aria-required="true" data-val-gender="Vul alstublieft dit veld in" data-val="true" data-val-required="Vul alstublieft dit veld in" value="m" id="male" name="general[gender]" class="image-radio-button__input" data-autotab="true" tabindex="1" aria-invalid="false">
                <label class="image-radio-button__label left" for="male">Man
                    <img class="image-radio-button__svg sm-hide" src="/static/images/remaster/18-35jaar_man.svg">
                </label>
                <input type="radio" data-event-label="vrouw" data-event-action="click" data-event-category="geslacht" aria-required="true" data-val-gender="Vul alstublieft dit veld in" data-val="true" data-val-required="Vul alstublieft dit veld in" id="female" value="m" name="general[gender]" class="image-radio-button__input" data-autotab="true" tabindex="1">
                <label class="image-radio-button__label right" for="female">Vrouw
                    <img class="image-radio-button__svg sm-hide" src="/static/images/remaster/18-35jaar_vrouw.svg">
                </label>
            </div>
        </div>

Solution

  • Let's say your html looks like this:

    <form id="myForm">
        <input type="radio" value="red" name="color">Red</input>
        <input type="radio" value="blue" name="color">Blue</input>
    </form> 
    

    Once you get the value from your cookie (it looks like you have a function written to get the cookie, so it would look something like this):

    var colorSelection = getCookie("colorRadioButtonSelection"); 
    

    You can check the correct radio button like this:

    $("input[name='color'][value=" + colorSelection + "]").prop("checked", true);