Can not reach the Java Script Folder
Question
Basically, I am trying to add my Radio Buttons a script file that remove all the selected buttons when the user clicks the other one. Basically It will block user to select more than 1 Radio Button . However, I can't. Here is my Java Script Code :
$().ready(function () {
var $allAccountSelectionRadios = $('.AccountSelectionRadio > input:radio');
$allAccountSelectionRadios.click(function () {
$allAccountSelectionRadios.not(this).each(function () {
this.checked = false;
});
});
});
And here is my asp.net code :
<head runat="server">
<title>Lab 11 - Exception Handling and Error Logging</title>
<script src="Scripts/jquery-3.0.0.js"></script>
<script src="script/AccountPageScript.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="Div1" runat="server">
<asp:Panel ID="AccountPanel" runat="server" GroupingText="Account Details" Visible="true">
<asp:Repeater ID="AccountInfoRepeater" runat="server" Visible="true">
<HeaderTemplate>
<table>
<thead>
<asp:TableHeaderCell ColumnSpan="2" runat="server" HorizontalAlign="Left">Account Id</asp:TableHeaderCell>
<asp:TableHeaderCell runat="server" HorizontalAlign="Left">Account Type</asp:TableHeaderCell>
<asp:TableHeaderCell runat="server" HorizontalAlign="Left">Balance</asp:TableHeaderCell>
<asp:TableHeaderCell runat="server" HorizontalAlign="Left">Currency</asp:TableHeaderCell>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:RadioButton ID="AccountSelectionRadioButton" runat="server" />
</td>
<td>
<asp:Label ID="AccountIDLabel" runat="server" Text='<%# Eval("Id") %>' />
</td>
<td>
<asp:Label ID="AccountTypeLabel" runat="server" Text='<%# Eval("Type") %>' />
</td>
<td>
<asp:Label ID="AmountLabel" runat="server" Text='<%# Eval("Amount") %>' />
</td>
<td>
<asp:Label ID="CurrencyLabel" runat="server" Text='<%# Eval("Currency") %>' />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<div></div>
<asp:Label ID="EnterAmountLabel" runat="server" Text="Enter Amount: " />
<asp:TextBox ID="WithdrawalAmountTextBox" runat="server" />
<asp:Button ID="SubmitButton" runat="server" Text="Submit" />
<div></div>
<asp:CustomValidator ID="CustomValidator" runat="server" ErrorMessage="You have to select at least one account " OnServerValidate="ValidateAccountIdSelection" Display="None" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator" runat="server" ErrorMessage="You have to enter a double value" ControlToValidate="WithdrawalAmountTextBox" Display="None" />
<asp:CompareValidator ID="CompareValidator" runat="server" ErrorMessage="You have to enter a double value " ControlToValidate="WithdrawalAmountTextBox" Type="Double" Operator="DataTypeCheck" Display="None" />
<div></div>
<asp:ValidationSummary ID="ValidationSummary" runat="server" />
</asp:Panel>
<asp:Panel ID="ErrorPanel" runat="server" Visible="false">
<asp:Label ID="SimpleBankErrorMessage" runat="server" />
</asp:Panel>
</div>
</form>
</body>
Do you have any idea that what causes this problem, or do you have any links that answers this question.
Thanks a lot guys, have a nice day !
EDIT:
Here is the code generated in HTML :
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZDo7pde1PlC3CEuIL05u8Q1xzcqV3PrxQf6BV-yOWDawu00wwYzaAVDc3H21VtA9QA2&t=635588690558757176" type="text/javascript"> </script>
<script src="/WebResource.axd?d=x2nkrMJGXkMELz33nwnakICvsGmK5SdM9dk67DGoGLRbDkaJ4AV4SDiDiYXmeJzOvX1FlDmSjt4uSO7vYhQSbfgakaHhNd17j5pdlKG7J5s1&t=635588690558757176" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
2 answers
solution1
1 2016-06-10 07:58:01
Why dont you do this server side??? with c#. All your radiobuttons are runat="server", so you might aswell have event listener that goes through them and makes the check.
$().ready(function () {
var $allAccountSelectionRadios = $('.AccountSelectionRadio > input:radio');
$allAccountSelectionRadios.click(function () {
$allAccountSelectionRadios.not(this).each(function () {
this.attr('checked',false);
});
});
this.attr('checked',false); would be the way I did it. But cant remember if it will work with ASP.Net event listeners.
solution2
1 2016-06-10 11:59:25
You need to make your radio buttons mutually exclusive.One way of doing it setting the name attribute to the same value for all radio buttons.To achieve this replace your script with this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('input:radio').each(function () {
$(this).attr('name', 'AccountSelectionRadioButtons')
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.