CODEWITHSUNDEEP
javascripthtml
user2870778
user2870778

Reputation: 107

radio button do not get unchecked on page reload

i have some radio buttons and page reload button in my html page 

<body>
<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text" id="wordfour" value="peace" readonly/>
        <input type="radio" id="four"/>
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id="mFour" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmFour" value="not fancy or beautiful" readonly/>
    </div>
</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text"  id="wordfive" value="pain" readonly/>
        <input type="radio" id="five"/>
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id="mFive" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmFive" value="a winged vehicle that files in the air" readonly/>
    </div>

</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text"  id="wordsix" value="plain" readonly/>
        <input type="radio" id="six" />
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id="mSix" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmSix" value="before now" readonly/>
    </div>
</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text"  id="wordseven" value="knight" readonly/>
        <input type="radio" id="seven"/>
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id="mSeven" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmSeven" value="went by, continued or proceeded" readonly/>
    </div>

</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text"  id="wordeight" value="past" readonly/>
        <input type="radio" id="eight"/>
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id="mEight" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmEight" value="a sheet of glass framed in a window or door" readonly/>
    </div>

</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text"  id="wordnine" value="night" readonly/>
        <input type="radio" id="nine" />
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id="mNine" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmNine" value="the dark hours between sunset and sunrise" readonly/>
    </div>

</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text" id="wordten" value="pane" readonly/>
        <input type="radio" id="ten"/>
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id ="mTen" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmTen" value="suffering, discomfort or distress" readonly/>
    </div>
</div>

<button onClick="reloadPage();" >Reset</button>
</body>

and reload function in my js file

function reloadPage()
{
 location.reload();
}

when i presses the reload button, all the radio buttons gets unchecked except the first pressed radio button , can some one help me in this issue ?

Upvotes: 0

Views: 1407

Answers (1)

bardo
bardo

Reputation: 363

(Sorry, I still can't comment, but I think some clarification is needed.)

Which browsers did you test this in? Is it consistent between different browsers?

Also, try removing the conflicting IDs, they could be the culprit if the browser stops processing after the first one not expecting to find more.

EDIT This is because of a firefox feature that remembers the form content when reloading the page. You should set Cache-Control: no-store in the headers you send to the client. See this relevant answer, which also provides other workarounds like setting autocomplete="off" for the relevant fields.

Upvotes: 1

Related Questions