Skip to content
Advertisement

div disappears when page refreshed

mjp

Can’t figure out why the below piece of code makes the textfield disappear upon page refresh (when ‘No’ radio button selected). Also, after the page is refreshed the default radio button doesn’t get selected.

Forcing refresh, fixes the problem, though.

Any ideas?

<html>
<body>
<div class="editfield">
        <div id="field_1">
            <label>
                <input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">Yes
        </label>
            <label>
                <input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">No
        </label>
    </div>
</div>
<div class="editfield" id="divUrl" style="display:none">
    <label>Website URL</label>
    <input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>

Advertisement

Answer

<!DOCTYPE html>
<html lang="en-US">
<body onLoad="document.getElementById('radio-2_id').checked=false; document.getElementById('radio-1_id').checked=true;">
<div class="editfield">
        <div id="field_1">
            <input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">
            <label for='radio-1_id'>
                Yes
        </label>
            <input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">
            <label for='radio-2_id'>
                No
        </label>
        </div>
</div>
<div class="editfield" id="divUrl" style="display:none">
    <label>Website URL</label>
    <input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>

just a short recap:
1. on page refresh the div should disappear (all css and js and html that was dynamically set / added is removed) and the selected radio button should be the first (Yes)
2. tested this on all major browser and it works
3. still can’t figure out why it wasn’t working on Mozilla and IE without the JS refresh



I moved the radio buttons out of the labels to see if that impacted the refresh in any way and it didn’t. Also, I removed an extra </div> that was in the original code.

Advertisement