Can select both radio buttons in IE - C#

Question

I'm thinking it's the placement of the C# code that is making my radio buttons not function properly - this bug so far is only showing up in IE. Hope this is enough info to get some feedback, I'm just a HTML/CSS/JS dev, thanks!

<% using(Html.BeginForm("CreateCustomerAccountLogin","BookingLogin")) {%>  
    <%=this.Hidden(x=>x.SID) %>
        <div><input class="radio" type="radio" name="NewAccount"  checked="checked" value="true" />
        <label>
            I want to create a new account
        </label></div>
        <div id="new-account">
        <%=this.TextBox(x => x.LoginName).Label("Email Address:")%>
        <br />
        <%=this.TextBox(x => x.ConfirmLoginName).Label("Confirm Email Address:")%><%= this.ValidationMessage(x=>x.ConfirmLoginName) %>
        <br />
        <%=this.Password(x => x.Password).Label("Password:")%><%= this.ValidationMessage(x=>x.Password) %>
        <br />
        <%=this.Password(x => x.Password).Label("Confirm Password:")%>
        <br />
        <%=this.TextBox(x => x.ZipCode).Label("ZipCode:")%><%= this.ValidationMessage(x=>x.ZipCode) %>
        <br />
         <% } %>
        </div>
    <div><input class="radio" type="radio" name="NewAccount" value="false" />
        <label class="wide">
            I want to continue without logging in
        </label>
    <div>
            <div class="button-container-right">
                <input class="button-primary" type="image" src="../Content/images/button-primary.jpg" border="0" id="btnSubmit" /></div></div></div>

Answer 1

Are there radio button part of same Form tag in rendered HTML code? If not try to make them part of same form tag which should solve your problem.

Answer 2

The second button is outside of the rendered form. If you want the radio buttons to be treated as a group then you need to move the second one inside the form.

Here's where the form starts:

<% using(Html.BeginForm("CreateCustomerAccountLogin","BookingLogin")) {%>

Here's everything that's within the form:

    <%=this.Hidden(x=>x.SID) %>
    <div><input class="radio" type="radio" name="NewAccount"  checked="checked" value="true" />
    <label>
        I want to create a new account
    </label></div>
    <div id="new-account">
    <%=this.TextBox(x => x.LoginName).Label("Email Address:")%>
    <br />
    <%=this.TextBox(x => x.ConfirmLoginName).Label("Confirm Email Address:")%><%= this.ValidationMessage(x=>x.ConfirmLoginName) %>
    <br />
    <%=this.Password(x => x.Password).Label("Password:")%><%= this.ValidationMessage(x=>x.Password) %>
    <br />
    <%=this.Password(x => x.Password).Label("Confirm Password:")%>
    <br />
    <%=this.TextBox(x => x.ZipCode).Label("ZipCode:")%><%= this.ValidationMessage(x=>x.ZipCode) %>
    <br />

Here's where the form ends:

    <% } %>

And here's everything else, outside the form:

    </div>
<div><input class="radio" type="radio" name="NewAccount" value="false" />
    <label class="wide">
        I want to continue without logging in
    </label>
<div>
        <div class="button-container-right">
            <input class="button-primary" type="image" src="../Content/images/button-primary.jpg" border="0" id="btnSubmit" /></div></div></div>