[英]How to get value of server-side html checkboxes in client-side?
Let's say I got some server-side HTML elements on a page as follow: 假设我在页面上有一些服务器端HTML元素,如下所示:
<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). 我想使用“域和年份”进行计算,并以SUM(div)显示结果。
The JavaScript was working fine as it has not runat="server"
attribute, but not it's not working. JavaScript可以正常运行,因为它没有
runat="server"
属性,但不是不能正常工作。
And here is the (working) JavaScript I used before adding runat
s: 这是我在添加
runat
之前使用的(有效的)JavaScript:
<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. 任何帮助将不胜感激。
There are lots of issues here: 这里有很多问题:
Below your inputs
and br
have no closing tags. 在您的
inputs
和br
以下,没有结束标记。
<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 . Javascript, 也使用jQuery 。
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;
}
If it was working before adding runat="server" then the issue is probably due to ASP.NET changing the IDs of the controls. 如果在添加runat =“ server”之前运行正常,则问题可能是由于ASP.NET更改了控件的ID。
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 ): 如果您使用的是ASP.NET 4,则可以使用ClientIDMode属性来阻止更改ID( http://msdn.microsoft.com/zh-cn/library/system.web.ui.control.clientidmode.aspx ) :
Eg the div would be 例如div将是
<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: 您还需要更改javascript,以通过ID而不是名称来获取div元素:
var _cblDomain = document.getElementById('cblDomain');
If you're using ASP.NET 2 then you will need to get the ClientIDs of the controls. 如果使用的是ASP.NET 2,则需要获取控件的ClientID。 If the javascript is part of the .aspx page then you can do this:
如果javascript是.aspx页的一部分,则可以执行以下操作:
var _cblDomain = document.getElementById('<%= cblDomain.ClientID %>');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.