CODEWITHSUNDEEP
javascripthtmlasp.netradio-button
Kevin Henzel
Kevin Henzel

Reputation: 155

ASP Radio button will not select when calling JavaScript function onClick

My JavaScript is working perfectly, though my radio buttons will not display as checked when clicked. When I alt+tab away from my web page and alt+tab back, it shows a shaded circle around the radio button, but still no proper check fill. Why is this?

I'm hoping this is an easy fix. I updated my asp radio button to call a JavaScript function as my ASP codebehind was issuing a postback and clearing some controls on my page. Needless to say, with the asp c# code behind functionality, the radio buttons were properly checking when clicked. I simply need to see the checks on the radio buttons when clicked with the JavaScript functionality in place. Here is my radio control HTML:

<div class="col s12 form-section" id="crimeInsurance">
            <h4 class="section-heading">CRIME INSURANCE</h4>
            <p>
                <asp:RadioButton ID="radLLCrimeIns" runat="server" GroupName="CrimeInsurance" ClientIDMode="Static" CssClass="with-gap" OnClick="return CrimeInsuranceToggle();" AutoPostBack="true" text="ACCEPT Crime Insurance (fee of $250.00)" />
            </p>
            <p>
                <asp:RadioButton ID="radLLNOCrimeIns" runat="server" GroupName="CrimeInsurance" ClientIDMode="Static" CssClass="with-gap" OnClick="return CrimeInsuranceToggle();" AutoPostBack="true" text="DO NOT ACCEPT Crime Insurance" />
            </p>
        </div>

and here is my JavaScript method:

function CrimeInsuranceToggle() {
        //controls the crime insurance radio yes/no buttons to update crime insurance fees
        var oCrimeRte = document.getElementById("lblCrimeCovFlatRate");
        var oCrimeTtl = document.getElementById("lblCrimeCovAmtDue");
        var oCrimeY = document.getElementById("radLLCrimeIns");
        var oCrimeN = document.getElementById("radLLNoCrimeIns");

        var radios = document.getElementsByTagName('input');
        var value;
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].type === 'radio' && radios[i].checked) {
                //find each radio that is checked, and act on the ID
                value = radios[i].value;
                if (value == 'radLLCrimeIns') {
                    oCrimeTtl.innerHTML = oCrimeRte.innerHTML;
                    radios[i].checked = true;
                }
                else if (value == 'radLLNOCrimeIns') {
                    oCrimeTtl.innerHTML = "0.00";
                    radios[i].checked = true;
                }
            }
        }

        return false;
    }

Help is very much appreciated.

Upvotes: 0

Views: 1081

Answers (1)

H77
H77

Reputation: 5967

Your function always returns false which prevents the radio button from ever being checked.

Try something like this (not tested):

Markup (Notice I pass in the element reference to the function):

<div class="col s12 form-section" id="crimeInsurance">
  <h4 class="section-heading">CRIME INSURANCE</h4>
  <p>
    <asp:RadioButton ID="radLLCrimeIns" runat="server" GroupName="CrimeInsurance" ClientIDMode="Static" CssClass="with-gap" OnClick="return CrimeInsuranceToggle(this);" AutoPostBack="true" text="ACCEPT Crime Insurance (fee of $250.00)" />
  </p>
  <p>
    <asp:RadioButton ID="radLLNOCrimeIns" runat="server" GroupName="CrimeInsurance" ClientIDMode="Static" CssClass="with-gap" OnClick="return CrimeInsuranceToggle(this);" AutoPostBack="true" text="DO NOT ACCEPT Crime Insurance" />
  </p>
</div>

Javascript:

function CrimeInsuranceToggle(rdo) {
  //controls the crime insurance radio yes/no buttons to update crime insurance fees
  var oCrimeRte = document.getElementById("lblCrimeCovFlatRate");
  var oCrimeTtl = document.getElementById("lblCrimeCovAmtDue");

  //find each radio that is checked, and act on the ID
  if (rdo.id == 'radLLCrimeIns') {
    oCrimeTtl.innerHTML = oCrimeRte.innerHTML;
  } else if (rdo.id == 'radLLNOCrimeIns') {
    oCrimeTtl.innerHTML = "0.00";
  }

  return rdo.checked;
}

Upvotes: 1

Related Questions