I have a two text box with radiobuttonlist.If the two test are blank it should alert "textbox are blank" and if its not blank it should alert "date is enabled".
This what i have tried with javascript
function checked() {
var radio = document.getElementById('<%=rbtn1.ClientId%>');
var cal1 = document.getElementById('<%=textstqo.ClientId%>').value;
var cal2 = document.getElementById('<%=textedqo.ClientId%>').value;
if (radio.checked = true) {
if(cal1 == '' && cal2 =='')
{
alert("dates cannot be blank");
return false
}else
{
alert("dates are enabled");
return true
}
}
}
Radio button list
<asp:RadioButtonList ID="rbtn1" runat="server" RepeatDirection="Vertical" RepeatLayout="Table" Height="300px" Width="101px" onClick="checked()" >
<asp:ListItem Text="one" Value="one" Enabled="true"></asp:ListItem>
<asp:ListItem Text="two" Value="two" Enabled="true" ></asp:ListItem>
<asp:ListItem Text="three" Value="three" Enabled="true"></asp:ListItem>
Edited
Error: Function expected
The first alert is working .when i tried to check the alert in else part it shows the above error
I have only shown you the first radio button that is "quaterone" and the javascript is also for quaterone
Can anyone tell me what i am doing wrongly.Thanks in advance
Problem is you are using wrong id for the radio button. '<%=rbtn1.ClientId%>_Quaterone'
Try instead: '<%=rbtn1.ClientId%>'
Edited:
var radioCont = document.getElementById('<%=rbtn1.ClientId%>');
var radio = radioCont.getElementsByTagName('input')[0];//first radio
Also you are trying to assign value instead of comparison:
if (radio.checked = true) { //assignment
Try this:
if (radio.checked == true) { // though `===` is recommended over `==`
You may also try:
if(radio.checked) {
// to do here
}
Change the attribute to onchange instead of onclick, here:
onClick="checked()" >
In order to uncheck the radio assign false to its state:
alert("dates cannot be blank");
radio.checked = false; //un-check the radio
return false;
To validate only when the first radio button is checked, you can check it like
if($('#rbtn1 input:radio:checked').val() == 'quaterone'){
// your condition here...
}
Related
I have two fields where the user can only write in one or the other, we validate the client side using the javascript below. The problem that I have is that the textboxes by default have a clear 'x' that when used doesn't trigger the javascript leaving one of the fields disabled.
How can I call the javascript function when the user clicks the clear 'x' of the textbox in order to get both fields enabled?
<asp:TextBox ID="txtFIELD1Val" runat="server" onKeyup="javascript:clearFields();" TabIndex="1" CssClass="cssTextbox"></asp:TextBox>
<asp:TextBox ID="txtFIELD2Val" runat="server" onKeyup="javascript:clearFields();" TabIndex="2" CssClass="cssTextbox"></asp:TextBox>
function clearFields() {
var txtFIELD1 = document.getElementById('<%= txtFIELD1Val.ClientID %>');
var txtFIELD2 = document.getElementById('<%= txtFIELD2Val.ClientID %>');
//Enable/Disable FIELD1 and FIELD2 fields based on text.
if (txtFIELD1.value == "" && txtFIELD2.value == "") {
txtFIELD1.disabled = false;
txtFIELD2.disabled = false;
}
else if (txtFIELD1.value == "" || txtFIELD2.value != "") {
txtFIELD1.disabled = true;
txtFIELD2.disabled = false;
}
else if (txtFIELD1.value != "" || txtFIELD2.value == "") {
txtFIELD1.disabled = false;
txtFIELD2.disabled = true;
}
}
Remove IE10's "clear field" X button on certain inputs?
See the second answer, seems to be the best approach to getting rid of the 'X' and the problems it's causing.
I have a dropdownlist that I want to wrap in a span.
What I would like to happen is...
When a user selects a new item from the dropdownlist, the span will check a js function and accept a return value of true/false.
If the span value = true then let the user continue with the selection, otherwise cancel selection and return the dropdownlist selected value to -1.
I have looked at many examples for the span tag but haven't been able to find something that will return a value.
How can I get this to work?
Thanks
<span ????>
<asp:DropDownList ID="ddSelectFormula" runat="server"
AppendDataBoundItems="true" AutoPostBack="false" CssClass="controltext"
DataSourceID="lnqSelectFormula" DataTextField="FormulaName"
DataValueField="FormulaID">
<asp:ListItem Selected="True" Text="Select Formula" Value="-1"> </asp:ListItem>
</asp:DropDownList>
</span>
function checkFormulaID() {
var hi = document.getElementById("ctl00_ContentPlaceHolder1_HiFormulaIDList").value;
var dd = document.getElementById("ctl00_ContentPlaceHolder1_ddSelectClientFormula").value;
var ddVal = dd.options[dd.selectedIndex].value;
if (hi > 0 && ddVal > 0) {
var retVal = confirm("Do you want to replace the current formula with this one?");
if (retVal == true) {
return true;
};
} else {
return false;
}
}
Your dropdownlist just needs to include
OnClientClick="checkFormulaID"
You may also have to edit your JS for the comparison if (hi > 0 && ddVal > 0) since JS can do crazy things with the value propery.
This javascript all but works with exception of radiobuttonlist.
<script language="javascript" type="text/javascript">
function validate() {
if (document.getElementById("<%=txtballotName.ClientID%>").value == "") {
alert("Ballot Name can not be blank");
document.getElementById("<%=txtballotName.ClientID%>").focus();
return false;
}
if (document.getElementById("<%=txtballotCity.ClientID %>").value == "") {
alert("Ballot City can not be blank");
document.getElementById("<%=txtballotCity.ClientID %>").focus();
return false;
}
if (document.getElementById("<%=txtballotState.ClientID%>").value == "") {
alert("Ballot State cannot be blank");
document.getElementById("<%=txtballotState.ClientID%>").focus();
return false;
}
if (document.getElementById("<%=txtballotZip.ClientID%>").value == "") {
alert("Zip Code cannot be blank");
document.getElementById("<%=txtballotZip.ClientID%>").focus();
return false;
}
if (document.getElementById("<%= txtreceivedby.ClientID %>").checked == false) {
alert("Request Received By can not be blank");
document.getElementById("<%=txtreceivedby.ClientID%>").focus();
return false;
}
return true;
}
The radiobuttonList looks like this:
<tr>
<td>
<label for="txtreceivedby_0">FAX</label>
<input id="txtreceivedby_0" type="radio" name="txtreceivedby" value="Fax" />
</td>
<td>
<label for="txtreceivedby_1">EMAIL</label>
<input id="txtreceivedby_1" type="radio" name="txtreceivedby" value="Mail" />
</td>
<td>
<label for="txtreceivedby_2">PHONE</label>
<input id="txtreceivedby_2" type="radio" name="txtreceivedby" value="Phone" />
</td>
</tr>
So far, the other form field are validating except the txtreceivedby radio button. I am not getting any errors but it isn't validating either.
Thanks in advance
You can create a short little utility function that will get you the value of any radio group:
function getRadioValue(name) {
var items = document.getElementsByName(name);
for (var i = 0; i < items.length; i++) {
if (items[i].checked) {
return(items[i].value);
}
}
}
You can then get the checked item in your radio group like this:
var val = getRadioValue("txtreceivedby");
Working Demo: http://jsfiddle.net/jfriend00/PHXaC/
ASP's radiobuttonlist render as a table containing radio button items. Therefore, it is a bit complicated to get the checked status of radio button.
You might find various sources if you google for "ASP radiobuttonlist and javascript". I have tested some of them and not every of them worked well specially if your page created from Master page.
However, I have tried in my own way and here it is:
<asp:RadioButtonList ID="txtReceivedBy" runat="server">
<asp:ListItem Text="Fax" Value="0"></asp:ListItem>
<asp:ListItem Text="Email" Value="1"></asp:ListItem>
<asp:ListItem Text="Phon" Value="2"></asp:ListItem>
</asp:RadioButtonList>
<input type="button" onclick="alert(checkedRadio());" value="Test RadioButtonChecked Status" />
and the javascript I have used to get the cehcked status is here
function checkedRadio() {
var rtn = false;
var i = 0;
var radioBoxesContainer = document.getElementById("<%=txtReceivedBy.ClientID%>");
if (radioBoxesContainer) {
var radioBoxes = radioBoxesContainer.getElementsByTagName("input");
if (radioBoxes && radioBoxes.length > 0) {
for (i - 0; i < radioBoxes.length; i++) {
if (radioBoxes[i].checked) {
rtn = true;
break;
}
}
}
}
return rtn;
}
if you are interested to get a live demo,
you can find it here http://plugins.amiwithyou.com/sof/
In a nutshell major headache; if you'd page me, I'd go with a nice good ol' fashion <select> box.
But to be useful, you need to have a look with view source at exactly what the ASP code plasts out to the browser. I don't know ASP but I bet it's either outputting 3 different ids on each radio, or the same id (#txtreceivedby) on all three of them.
Whatever it gives out, the validation code if(bla_bla_blah.checked===false) is wrong because it only targets just one in the set of radios and even with that fixed, that radio might not return .checked===false cross-browser.
in aspx file I have
<asp:DropDownList ID="DropDownList1" runat="server" >
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server">
</asp:DropDownList>
<asp:Button ID="load_data" runat="server" Text="<%$ Resources : load_data %>"
onclick="load_data_class_Click" Visible="False"/>
Now I want to set button to be visible only after i made changes in 2 dropdownlists in javascript
how to do this?
Markup will not be generated for ASP.NET controls whose Visible property is set to False. You need to apply CSS (display:none or visibility) via JavaScript code.
The first problem is that you can't use Visible="false", you need to use CSS and set visibility: hidden;, or display:none.
Once you've done that, you can do the following ->
Get the ID's of the lists:
//id #1
var ddl1 = document.getElementById("DropDownList1");
//id #2
var ddl2 = document.getElementById("DropDownList2");
Now, we need to create an onChange function to grab the values, and test if they're empty, if not, then we'll show the button.
function showButton(){
//out of <option value="3"> This is 3rd </option> you get:
var selected1text = ddl1.option[ddl.selectedIndex].text; // returns: This is 3rd
var selected1value = ddl1.option[ddl.selectedIndex].val; // returns: 3
//out of <option value="75"> This is 75th </option> you get:
var selected2text = ddl2.option[dd2.selectedIndex].text; // returns: This is 75th
var selected2value = ddl2.option[dd2.selectedIndex].val; // returns: 75
if(
selected1text != "" &&
selected1value != "" &&
selected2text != "" &&
selected2value != ""
){
//Our select lists all have values. We can show our button now.
//if you use visibility:hidden;
document.getElementById('load_data').style.visibility='visible';
//if you use display:none;
document.getElementById('load_data').style.display='block';
}else{
//don't do anything.
}
}
Then, in your dropdown list, you can add the onChange=showButton();
Should work.
You can take one hidden element with value 0 and whenever someone change the dropdown, increment the value of this hidden element and when it reaches equal to 2 then show the button.
Basically you need to call a function on change event of both drop-down which will do the above thing.
I solved the problem with jquery
$(document).ready(function () {
$('#load_data').live('click', function () {
var result;
if (($('#DropDownList1 option:selected').val() != '') &&
($('#DropDownList2 option:selected').val() != '') &&
($('#DropDownList3 option:selected').val() != '')) {
//result = true;
alert("true");
result = true;
} else {
// result= false;
alert("false");
result = false;
}
return result;
});
});
I am developing a website using asp.net and C#.
I am using a RadioButtonList control. The code snippet for RadioButtonList is shown below
<asp:RadioButtonList ID="RLCompareParameter" runat="server"
RepeatDirection="Horizontal" meta:resourcekey="rsKey_RLCompareParameter"
AutoPostBack="True"
onselectedindexchanged="RLCompareParameter_SelectedIndexChanged">
<asp:ListItem Selected="True" Value="Forms" meta:resourcekey="rsKey_RLCompareParameterListItemForms" Text="Forms"></asp:ListItem>
<asp:ListItem Value="Segments" meta:resourcekey="rsKey_RLCompareParameterListItemSegments" Text="Segments"></asp:ListItem>
<asp:ListItem Value="Questions" meta:resourcekey="rsKey_RLCompareParameterListItemQuestions" Text="Questions"></asp:ListItem>
</asp:RadioButtonList>
There is a button in the same page. While clicking on that button i want to display an alert message based on the selected radio list item using javascript. Some part of my javascript function is shown below
var RLCompareParameter = this.document.getElementById("<%= RLCompareParameter.ClientID %>");
if (RLCompareParameter.SelectedValue == "Forms") {
if (document.getElementById("<%= lbAvailableForms.ClientID %>").value == "") {
alert("Please select a form from Available Evaluation Forms ");
return false;
}
} else if (RLCompareParameter.SelectedValue == "Segments") {
if (document.getElementById("<%= lbAvailableSegments.ClientID %>").value == "") {
alert("Please select a segment from the available segments ");
return false;
}
} else if (RLCompareParameter.SelectedValue == "Questions") {
if (document.getElementById("<%= lbAvailableQuestions.ClientID %>").value == "") {
alert("Please select a Question from the available questions");
return false;
}
}
But the if(RLCompareParameter.SelectedValue == "some value") always false. i think there is no attribute like selected value for RadioButtonList control. I hope someone help me
In html, there is no such thing as a RadioButtonList. Your RLCompareParameter variable will be a reference to the table or span that is containing the three input elements (thats what the ASP.NET control outputs into your page). SelectedValue is only for ASP.NET code, not javascript.
You will have to get a reference to the specific input element itself and look at its checked property in your if statements to see whether that radio button is selected or not. There are several ways to do this. Here's one that might work:
var RLCompareParameter = document.getElementById("<%= RLCompareParameter.ClientID %>");
var radioButtons = RLCompareParameter.getElementsByTagName('input');
if (radioButtons[0].checked) {
if (document.getElementById("<%= lbAvailableForms.ClientID %>").value == "") {
alert("Please select a form from Available Evaluation Forms ");
return false;
}
} else if (radioButtons[1].checked) {
if (document.getElementById("<%= lbAvailableSegments.ClientID %>").value == "") {
alert("Please select a segment from the available segments ");
return false;
}
} else if (radioButtons[2].checked) {
if (document.getElementById("<%= lbAvailableQuestions.ClientID %>").value == "") {
alert("Please select a Question from the available questions");
return false;
}
}