I have a RadioButtonList. I want the button to be available when I click "Agree", and not available when I click "Disagree". Default is disabled.
Now whether I agree or disagree, my btnSubmit button will become available. And it won't change back to unavailable.
function acceptprotocol() {
if (document.getElementById("rblAccept").SelectValue == 0 {
document.getElementById("btnSubmit").disabled = true;
}
else {
document.getElementById("btnSubmit").disabled = false;
}
}
RadioButtonList:
<asp:RadioButtonList ID="rblAccept" runat="server"
RepeatDirection="Horizontal" style="margin:auto"
onclick="acceptprotocol()">
<asp:ListItem Value="0">Agree</asp:ListItem>
<asp:ListItem Value="1" Selected="True">Against</asp:ListItem>
</asp:RadioButtonList>
How to solve it? Please help me.
Here's the code snippet for your solution:
RadioButtonList:
<asp:RadioButtonList ID="rblAccept" runat="server" RepeatDirection="Horizontal" style="margin:auto"
onclick="acceptprotocol()">
<asp:ListItem Value="0">Agree</asp:ListItem>
<asp:ListItem Value="1" Selected="True">Disagree</asp:ListItem>
</asp:RadioButtonList>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" Enabled="false" />
Function:
function acceptprotocol() {
var radioButtonAccept = document.getElementById('<%=rblAccept.ClientID %>').getElementsByTagName("input");;
for (var i = 0; i < radioButtonAccept.length; i++) {
if (radioButtonAccept[i].checked) {
if (radioButtonAccept[i].value == 1) {
document.getElementById('<%=btnSubmit.ClientID %>').disabled = true;
}
else {
document.getElementById('<%=btnSubmit.ClientID %>').disabled = false;
//use this bellow line if you want the after enable button button will availble all time
document.getElementById('<%=rblAccept.ClientID %>').removeAttribute("onclick");
}
break;
}
else {
document.getElementById('<%=btnSubmit.ClientID %>').disabled = true;
}
}
}
Related
I got several checkbox, but I only want the the text "New Desktop" and "New Laptop" can only choose 1 out of 2. I hope it could be done in C#.
<asp:CheckBoxList ID="Service1" runat="server"
Width="251px" >
<%--onselectedindexchanged="checkBox1_CheckedChanged"--%>
<asp:ListItem text="New Login ID & Email Address" ></asp:ListItem>
<asp:ListItem text="New Desktop" Value="2" oncheckedchanged="checkBox1_CheckedChanged" ></asp:ListItem>
<asp:ListItem text="New Notebook" Value="3" oncheckedchanged="checkBox2_CheckedChanged"></asp:ListItem>
<asp:ListItem text="New Mouse"></asp:ListItem>
<asp:ListItem text="New Keyboard"></asp:ListItem>
<asp:ListItem text="New Printer"></asp:ListItem>
</asp:CheckBoxList>
//.cs pages
protected void checkBox1_CheckedChanged(object sender, EventArgs e)
{
if (Service1.Items[2].Selected == true)
{
Service1.Items[3].Enabled = false;
}
}
protected void checkBox2_CheckedChanged(object sender, EventArgs e)
{
if (Service1.Items[3].Selected == true)
{
Service1.Items[2].Enabled = false;
}
}
I am giving you one example below but still this may not be a feasible way. You need to add CheckedChanged event to each CheckBox to remove check from other CheckBoxes
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
if(CheckBox1.Checked)
{
CheckBox2.Checked =false;
CheckBox3.Checked =false;
CheckBox4.Checked =false;
}
}
You should repeat the above evevt for CheckBox2 , CheckBox3 and so on. You can extend it as per your requirement.
But in this scenario I would recommend you to use the ASP.NET Radio Button Control. Please refer this link for more information on Radio Button Control.
You can use OnSelectedIndexChanged event for CheckBoxList with AutoPostBack="True" so your control send request to server and selection chenged event will be call
I.e : For design
<asp:CheckBoxList ID="Service1" runat="server" Width="251px" AutoPostBack="True" OnSelectedIndexChanged="Service1_SelectedIndexChanged">
<asp:ListItem Text="New Login ID & Email Address"></asp:ListItem>
<asp:ListItem Text="New Desktop" Value="2"></asp:ListItem>
<asp:ListItem Text="New Notebook" Value="3" ></asp:ListItem>
<asp:ListItem Text="New Mouse"></asp:ListItem>
<asp:ListItem Text="New Keyboard"></asp:ListItem>
<asp:ListItem Text="New Printer"></asp:ListItem>
</asp:CheckBoxList>
and in code: 'li' have all selected item and as per your requirement "New Desktop" and "New Laptop" only choose 1 out of 2 .
protected void Service1_SelectedIndexChanged(object sender, EventArgs e)
{
CheckBoxList li = (CheckBoxList)sender;
foreach (ListItem l in li.Items)
{
if (l.Value == "2")
{
if (l.Selected)
{
Service1.Items[2].Enabled = false;
}
else
{
Service1.Items[2].Enabled = true;
}
}
else if (l.Value == "3")
{
if (l.Selected)
{
Service1.Items[1].Enabled = false;
}
else
{
Service1.Items[1].Enabled = true;
}
}
}
}
I have created event for select index changed for dropdownlist like below but the event is not firing.I dont know what is going wrong?
<asp:DropDownList ID="ddlcurrency" runat="server" OnSelectedIndexChanged="ddlcurrency_SelectedIndexChanged1" >
<asp:ListItem Value="Nrs" >Nrs</asp:ListItem>
<asp:ListItem Value="$" >$</asp:ListItem>
</asp:DropDownList>
protected void ddlcurrency_SelectedIndexChanged1(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (ddlcurrency.Items.FindByText("$").Selected == true) //keeping the currency value in session
{
Session["Curr"] = "Dol";
}
else
{
Session["Curr"] = "Nrs";
}
}
}
try this:
<asp:DropDownList ID="ddlcurrency" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlcurrency_SelectedIndexChanged1" >
<asp:ListItem Value="Nrs" >Nrs</asp:ListItem>
<asp:ListItem Value="$" >$</asp:ListItem>
</asp:DropDownList>
Have you tried setting a break point at the SelectedIndexChaged event of the DDL to check if HITS there?
<asp:DropDownList ID="ddlcurrency" runat="server" AutoPostback="true" OnSelectedIndexChanged="ddlcurrency_SelectedIndexChanged1" >
<asp:ListItem Value="Nrs" >Nrs</asp:ListItem>
<asp:ListItem Value="$" >$</asp:ListItem>
</asp:DropDownList>
protected void ddlcurrency_SelectedIndexChanged1(object sender, EventArgs e)
{
if (ddlcurrency.Items.FindByText("$").Selected == true) //keeping the currency value in session
{
Session["Curr"] = "Dol";
}
else
{
Session["Curr"] = "Nrs";
}
}
Set autopost back property of dropdown control to true
<asp:DropDownList ID="ddlcurrency" runat="server"
OnSelectedIndexChanged="ddlcurrency_SelectedIndexChanged1" AutoPostBack="true" >
here is my following stuff in asp.net
<asp:RadioButtonList ID="RbList" runat="server"
onselectedindexchanged="RbList_SelectedIndexChanged">
<asp:ListItem Text="Male" Value="1"></asp:ListItem>
<asp:ListItem Text="Female" Value="2"></asp:ListItem>
</asp:RadioButtonList>
<asp:Label ID="lbltest" runat="server"></asp:Label>
and here is my RBList_SelectedIndexChanged event.
int i = RbList.SelectedIndex;
if (i == 1)
{
lbltest.Text = "You have click on male";
}
if (i == 2)
{lbltest.Text = "You have click on female";}
Now, I want when item 1 is selected the text lable must be according to the selected item of radiobutton list.
How could be this is possible?
Regards.
Set Autopostback="true" on RbList
change your code to the following:
int i = RbList.SelectedIndex;
if (i == 0)
{
lbltest.Text = "You have click on male";
}
else if (i == 1)
{ lbltest.Text = "You have click on female"; }
There is a CheckBoxList (selection can be multiple) and a TextBox which is not displayed by default. The requirements are:
1. When user click "Other" in CheckBoxList, the TextBox should display.
2. Since the TextBox is required when displayed, the Validator should be disabled when the TextBox is not displayed.
.aspx content page
<label for="labelSelection">Please Select:</label>
<asp:CheckBoxList ID="cblSelection" onclick="ShowOtherInfo(this)" runat="server">
<asp:ListItem Text="AAA" Value="1" />
<asp:ListItem Text="BBB" Value="2" />
<asp:ListItem Text="Other" Value="0" />
</asp:CheckBoxList>
<div id="OtherInfo" style ='display:none'>
<label for="labelOtherInfo">Enter detail if "Other" is selected: </label>
<asp:TextBox ID="OtherInfoTextBox" runat="server" />
<asp:RequiredFieldValidator ID="rfvOtherInfo" ControlToValidate="OtherInfoTextBox"
ErrorMessage="Enter other info" SetFocusOnError="true" Display="Dynamic" runat="server" />
</div>
<div>
<asp:Button ID="buttonSubmit" runat="server" Text="Submit" CausesValidation="true" OnClientClick="ShowOtherInfo()" OnClick="buttonSubmit_Click" />
</div>
Javascript placed on .master page
function ShowOtherInfo() {
var OI = document.getElementById('OtherInfo');
var CheckLists = document.getElementById('cblSelection');
var checkbox = CheckLists.getElementsByTagName("input");
if (checkbox[2].checked) {
document.getElementById('OtherInfo').style.display = "block";
ValidatorEnable(document.getElementById('rfvOtherInfo'), true);
} else {
document.getElementById('OtherInfo').style.display = "none";
ValidatorEnable(document.getElementById('rfvOtherInfo'), false);
}
}
Since I prefer using Javascript for validation, I have tried onchange/onclick event for CheckBoxList and onClientClick event for "Submit" button, but none of them works. Any help is greatly appreciated. After initial posting, I tried to replace OnSelectedIndexChanged="ShowOtherInfo" with onclick="ShowOtherInfo(this)" for CheckBoxList. And the code-behind on .cs file is:
public void DisplayOtherInfo(object sender, EventArgs e)
{
CheckBoxList cblSelection = (CheckBoxList)myFormView.FindControl("cblSelection");
RequiredFieldValidator rfvOtherInfo = (RequiredFieldValidator)myFormView.FindControl("rfvOtherInfo");
HtmlGenericControl OtherInfo = new HtmlGenericControl("OtherInfo");
for (int i = 0; i < cblSelection.Items.Count; i++)
{
if (cblSelection.Items[2].Selected == true)
{
OtherInfo.Style["display"] = "block";
rfvOtherInfo.Enabled = true;
}
else
{
OtherInfo.Style["display"] = "none";
rfvOtherInfo.Enabled = false;
}
}
}
But the TextBox still doesn't even display, not to say disable validator.
This is the Javascript Code
<script type="text/javascript">
function ShowOtherInfo() {
var OI = document.getElementById('OtherInfo');
var CheckLists = document.getElementById('cblSelection');
var checkbox = CheckLists.getElementsByTagName("input");
if (checkbox[2].checked) {
document.getElementById('OtherInfo').style.display = "block";
} else {
document.getElementById('OtherInfo').style.display = "none";
}
return true;
}
function onSubmit() {
if (document.getElementById('OtherInfoTextBox').value == "") {
if (checkbox[2].checked) {
alert('Enter other info');
return false;
}
else {
return true;
}
}
else {
return true;
}
}
</script>
and this is your .aspx content
<div>
<label for="labelSelection">Please Select:</label>
<asp:CheckBoxList ID="cblSelection" onclick="ShowOtherInfo(this)" runat="server">
<asp:ListItem Text="AAA" Value="1" />
<asp:ListItem Text="BBB" Value="2" />
<asp:ListItem Text="Other" Value="0" />
</asp:CheckBoxList>
<div id="OtherInfo" style ='display:none'>
<label for="labelOtherInfo">Enter detail if "Other" is selected: </label>
<asp:TextBox ID="OtherInfoTextBox" runat="server" />
</div>
<asp:Button ID="buttonSubmit" runat="server" Text="Submit" CausesValidation="true" OnClientClick="return onSubmit();" />
</div>
I have a user control that contains 3 dropdown for(date,month, year).I have called this user control on aspx page.
Please select Date From.
On my aspx page all fields are validated with javascript validation.
when I select date from this user control (not month & year) ,and click on submit button, it shows the error message.
but my problem is that if i select year (not date,month) then in this case neither it fire the error message nor it saves the data.
I want that it fired the message everytime when atleast one field(day,month,year) is not selected.I want to handle this problem on clentside. Please give me your suggetion.
function InputValidation(vg) {
var isValid = true;
try {
var j = 0;
var inputCtrlArr = new Array();
var key = 'block';
var inputIntputArr = document.getElementsByTagName('input');
var inputDdlArr = document.getElementsByTagName('select');
var inputTextareaArr = document.getElementsByTagName('textarea');
var c = 0;
for (var i = 0; inputIntputArr.length > i; i++) inputCtrlArr[c++] = inputIntputArr[i];
for (var i = 0; inputDdlArr.length > i; i++) inputCtrlArr[c++] = inputDdlArr[i];
for (var i = 0; inputTextareaArr.length > i; i++) inputCtrlArr[c++] = inputTextareaArr[i];
for (var i = 0; inputCtrlArr.length > i; i++) {
if (inputCtrlArr[i].getAttribute('required') == 'true' && inputCtrlArr[i].getAttribute('vg') == vg) {
if (inputCtrlArr[i].value.trim() == '') {
//errinputReqCtrlArr[j++] = inputCtrlArr[i];
key = 'block';
isValid = false;
}
else {
key = 'none';
}
if (inputCtrlArr[i].type == "checkbox") {
if (inputCtrlArr[i].checked == false) {
//errinputReqCtrlArr[j++] = inputCtrlArr[i];
key = 'block';
isValid = false;
}
else {
key = 'none';
}
}
var errorDivId = inputCtrlArr[i].getAttribute('ErrorDivId');
var objErrorDivId = document.getElementById(errorDivId);
if (objErrorDivId != null) objErrorDivId.style.display = key;
}
}
}
catch (ex) { }
}
function InputCntrlValidate(obj) {
try {
if (obj.getAttribute('required') == 'true') {
if (obj.value == '') {
key = 'block';
}
else {
key = 'none';
}
var errorDivId = obj.getAttribute('ErrorDivId');
var objErrorDivId = document.getElementById(errorDivId);
if (objErrorDivId != null) objErrorDivId.style.display = key;
}
} catch (ex) { }
}
function sanitizeInput(obj) {
if (obj.getAttribute('msg') == obj.value) {
alert("same value");
}
}
The problem is in your JavaScript. Since if it is working for the one dropdownlist then it should work for other two. Further you will have to check for month and date. If it is feb then the days should be 28 or 29 and it will depend on the year. So lots of effort will require to solve it.
You only need three RequiredFieldValidators with each ControlToValidate leading to one of your DropDownLists. If you've a default value of f.e. "please select" you should set this as InitialValue of the Validators.
Here is a sample(i've only added few ListItems instead of all for dates,months and years):
<asp:DropDownlist ID="DdlDate" runat="server">
<asp:ListItem Text="please select" Enabled="true"></asp:ListItem>
<asp:ListItem Text="1"></asp:ListItem>
<asp:ListItem Text="2"></asp:ListItem>
<asp:ListItem Text="3"></asp:ListItem>
</asp:DropDownlist>
<asp:RequiredFieldValidator ID="ReqDate"
ControlToValidate="DdlDate"
InitialValue="please select"
ErrorMessage="Please select Date"
Display="Dynamic"
runat="server">
</asp:RequiredFieldValidator>
<asp:DropDownlist ID="DdlMonth" runat="server">
<asp:ListItem Text="please select" Enabled="true"></asp:ListItem>
<asp:ListItem Text="January"></asp:ListItem>
<asp:ListItem Text="February"></asp:ListItem>
<asp:ListItem Text="March"></asp:ListItem>
</asp:DropDownlist>
<asp:RequiredFieldValidator ID="ReqMonth"
ControlToValidate="DdlMonth"
InitialValue="please select"
ErrorMessage="Please select Month"
Display="Dynamic"
runat="server" >
</asp:RequiredFieldValidator>
<asp:DropDownlist ID="DdlYear" runat="server">
<asp:ListItem Text="please select" Enabled="true"></asp:ListItem>
<asp:ListItem Text="2010"></asp:ListItem>
<asp:ListItem Text="2011"></asp:ListItem>
<asp:ListItem Text="2012"></asp:ListItem>
</asp:DropDownlist>
<asp:RequiredFieldValidator ID="ReqYear"
ControlToValidate="DdlYear"
InitialValue="please select"
ErrorMessage="Please select Year"
Display="Dynamic"
runat="server" >
</asp:RequiredFieldValidator>
<asp:Button ID="BtnSubmit" runat="server" Text="submit" />
I would use the calendar control on the AjaxControlToolKit if it were me. No validation required then other than if the field is mandatory. It's a lot easier and looks a lot better. All client side.
Just down load the ajxcontrolkit dll and include in your project and use as per any custom control/third party component.
EDIT:
Ok if you just want at least one drop down to be selected then try JQuery e.g.
function isDropDownsValid()
{
var isValid = true;
$('select').map(function()
{
if($(this).val() == -1)
{
isValid = false;
}
});
return isValid;
}
Then wire into your submit button like so
<asp:Button ID="myButton" runat="server" OnClientClick="return isDropDownsValid" Text="Submit />
Here is a fiddle with a demo. You may need to change the selector $('select') to target the exact dropdowns you need.