How to get value of server-side html checkboxes in client-side?

Question

Let's say I got some server-side HTML elements on a page as follow:

<div id="cblDomain" runat="server">
    <input runat="server" id="cblDomain_com" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain" checked="checked"><label for="cblDomain_com">com - 10</label><br>
    <input runat="server" id="cblDomain_net" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain"><label for="cblDomain_net">net - 10</label><br>
    <input runat="server" id="cblDomain_info" value="5" onchange="subsumDomain()" type="checkbox" name="cblDomain"><label for="cblDomain_info">info - 5</label><br>
    <input runat="server" id="cblDomain_me" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain"><label for="cblDomain_me">me - 10</label>
</div>

<select runat="server" name="ddlDomainPeriod" onchange="subsumDomain()" id="ddlDomainPeriod">
    <option value="1">1 yr</option>
    <option value="2">2 yrs</option>
    <option value="3">3 yrs</option>
    <option value="4">4 yrs</option>
    <option value="5">5 yrs</option>
</select>
<div name="sum" id="sumDomain">10</div>

I want to do a calculation with Domains & Year and show the result in SUM (div).

The JavaScript was working fine as it has not runat="server" attribute, but not it's not working.

And here is the (working) JavaScript I used before adding runat s:

    <script type="text/javascript">
        function subsumDomain() {
            var _sum = 0;
            var _cblDomain = document.getElementsByName('cblDomain');
            for (i = 0; i < _cblDomain.length; i++) {
                if (_cblDomain[i].checked == true)
                    _sum += Number(_cblDomain[i].value);
            }
            var _domainPeriod = Number(document.getElementById('ddlDomainPeriod').options[document.getElementById('ddlDomainPeriod').selectedIndex].value);
            document.getElementById('sumDomain').innerHTML = moneyConvert(_sum * _domainPeriod);
        }
</script>

Now the code is kind of complicated to me and I don't know how to fix it and get the correct answer.

Any kind help would be highly appreciated.

Answer 1

There are lots of issues here:

Below your inputs and br have no closing tags.

<input runat="server" id="cblDomain_com" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain" checked="checked"><label for="cblDomain_com">com - 10</label><br>

I coudn't get the code below to work with server controls, the array was empty.

var _cblDomain = document.getElementsByName('cblDomain');
var _cblDomain = $(".cblDomain :input"); <-- USE THIS INSTEAD (jQuery) *

Also

document.getElementById('ddlDomainPeriod')
document.getElementById('<%= ddlDomainPeriod.ClientID %>') <-- USE THIS INSTEAD *

Full working code below:

Markup

<div class="cblDomain" id="cblDomain" runat="server">
  <input runat="server" id="cblDomain_com" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain" checked="checked" /><label for="cblDomain_com">com - 10</label><br>
  <input runat="server" id="cblDomain_net" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain"><label for="cblDomain_net" />net - 10</label><br>
  <input runat="server" id="cblDomain_info" value="5" onchange="subsumDomain()" type="checkbox" name="cblDomain"><label for="cblDomain_info" />info - 5</label><br>
  <input runat="server" id="cblDomain_me" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain"><label for="cblDomain_me" />me - 10</label>
</div>
  <select runat="server" name="ddlDomainPeriod" onchange="subsumDomain()" id="ddlDomainPeriod">
    <option value="1">1 yr</option>
    <option value="2">2 yrs</option>
    <option value="3">3 yrs</option>
    <option value="4">4 yrs</option>
    <option value="5">5 yrs</option>
  </select>
<div name="sum" id="sumDomain">10</div>

Javascript, uses jQuery also .

function subsumDomain() {
  var _sum = 0;
  var _cblDomain = document.getElementsByName('cblDomain');
  var _cblDomain = $(".cblDomain :input");
  for (i = 0; i < _cblDomain.length; i++) {
    if (_cblDomain[i].checked == true)
      _sum += Number(_cblDomain[i].value);
  }
  var _domainPeriod = Number(document.getElementById('<%= ddlDomainPeriod.ClientID %>').options[document.getElementById('<%= ddlDomainPeriod.ClientID %>').selectedIndex].value);
  document.getElementById('sumDomain').innerHTML = _sum * _domainPeriod;
}

Answer 2

If it was working before adding runat="server" then the issue is probably due to ASP.NET changing the IDs of the controls.

If you are using ASP.NET 4 you can use the ClientIDMode attribute to stop the ID from being changed ( http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx ):

Eg the div would be

<div id="cblDomain" runat="server" ClientIDMode="Static">

and the dropdown would be

<select runat="server" name="ddlDomainPeriod" onchange="subsumDomain()" id="ddlDomainPeriod" CliendIDMode="Static">

You would also need to change the javascript to get the div element by ID rather than name:

var _cblDomain = document.getElementById('cblDomain');

If you're using ASP.NET 2 then you will need to get the ClientIDs of the controls. If the javascript is part of the .aspx page then you can do this:

var _cblDomain = document.getElementById('<%= cblDomain.ClientID %>');