Member Avatar for lena1990

hi guys
please i want you to help me solve the problem i have the following page and this is part of the code

<form action="practicetest.html" method="post" target="_self">

    <table width="95%" border="0" cols="2" align="center" cellspacing="10">

        <tr>
            <td valign="top">1.</td>

            <td bgcolor=#EBEBEB>Two ducks and two dogs have a total of fourteen legs.
            <br/>
            <br/>
            <input type="radio" name="1" value="true">True&nbsp;&nbsp; <input type="radio" name="1" value="false">False</td>
        </tr>

        <tr>

            <td valign="top">2.</td>

            <td bgcolor=#FFFFFF>A pie can be cut into more than seven pieces by making four diameter cuts.
            <br/>
            <br/>
            <input type="radio" name="2" value="true">True&nbsp;&nbsp; <input type="radio" name="2" value="false">False</td>

        </tr>

        <tr>
            <td valign="top">3.</td>

            <td bgcolor=#EBEBEB>Two of the following numbers add up to thirteen.<br/><br/>1, 6, 3, 5, 11
            <br/><br/>
            <input type="radio" name="3" value="true">True&nbsp;&nbsp; <input type="radio" name="3" value="false">False</td>

        </tr>

        <tr><td colspan="2" align="center"><input type="submit" value="Finished!"></td></tr>

    </table>

</form>

now if i open this page and click on one of the radio buttons the html code is not changed so i want when i click one of radio buttons the html code change to be like that

<input type="radio" name="2" value="true">True&nbsp;&nbsp; <input type="radio" name="2" value="false" checked>False</td>
so how can i do that

  • 2 Contributors
  • 2 Replies
  • 123 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by lena1990

Dani AI

Generated

: the behavior you describe is normal. The browser "View Source" shows the original HTML as delivered by the server. Clicking a radio changes the element's runtime state (the DOM property), not the original source file, so the raw page source will not show a newly added checked attribute.

Browsers expose the live DOM in Developer Tools (Inspect/Elements), and that view will show attributes you add or remove at runtime. To make a clicked radio show a checked attribute in the DOM (visible in the Elements panel) you can set or remove the attribute with JavaScript. The usual approach is to listen for the change event, clear the checked attribute for other radios in the same group, then set it on the selected input.

Example: 

document.addEventListener('change', function(e) {
  if (!e.target.matches('input[type="radio"]')) return;
  var name = e.target.name;
  document.querySelectorAll('input[type="radio"][name="' + name + '"]').forEach(function(r){
    r.removeAttribute('checked');
  });
  e.target.setAttribute('checked', 'checked');
  e.target.checked = true;
});

If you want the selection to survive page reloads, persist the choice (send to the server on submit or save it locally with localStorage) and restore it on load by setting both the checked property and the checked attribute.

Notes and troubleshooting:

  • Use the Elements/Inspector panel (F12) to see runtime changes; "View Source" will not reflect them.
  • Use the change event, not click, for reliable radio-group handling.
  • To learn more about the checked property and DOM attribute methods see MDN: HTMLInputElement.checked and Element.setAttribute.

: this explains the difference between source and live DOM.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

Sorry it could be me but I do t understand what you are trying to accomplish. Can you elaborate. Bit more

Member Avatar for lena1990

i have radio button in the code of html page
<input type="radio" name="3" value="true">True&nbsp;&nbsp; <input type="radio" name="3" value="false">False</td>
i want when to open the page in firefox and click on the radio button the html source code be like this

<input type="radio" name="3" value="true">True&nbsp;&nbsp; <input type="radio" name="2" value="false" checked>False</td>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.