Currently, I am in the process of developing a website for my job and I have come across a dilemma with two radio button options. To make the text and radio buttons function as links that redirect users to specific pages within the website, I utilized <a> tags. Surprisingly, everything worked smoothly on Firefox. However, when I tested the website on Chrome, the text acted as a link but the radio buttons failed to respond. Clicking on them only resulted in the page refreshing without any action. In an attempt to fix this, I even added a submit button to direct users to the designated pages, but unfortunately, that did not resolve the issue. I tried to replicate the code from the website as closely as possible, and you can view it in the link below:
https://jsfiddle.net/hLph4at4/1/
<form name="frmSite" style="float: left; margin-top: 5px;">
<a class="loginPg_choices" href="www.youtube.com">
<input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
<span style="float: left; margin: -2px 0 0 5px;">Take me to youtube.</span>
<br/>
</a>
<a class="loginPg_choices" href="www.google.com">
<input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
<span style="float: left; margin: -2px 0 0 5px;">Take me to google.</span>
<br/>
</a>
<a href="#" type="submit" value="Submit" title="Login" style="float: right; clear: both;">
Submit
</a>
</form>