I have 2 check boxes where only one or none may be checked.
Since I can't do a postback I tried this with Javascript.
The Javascript finds the element (tested it with an alert).
But the value won't change.
Any Idea how I can do this with Javascript?
The Javascript:
function mrcAndNbbFilterChanged(mrcOrNbb)
{
alert("er in");
if(mrcOrNbb == 0)
{
document.getElementById("ctl00_contentHolder_cb_mrcFilter").checked=true;
document.getElementById("ctl00_contentHolder_cbNoBackBilling").checked=false;
alert(document.getElementById("ctl00_contentHolder_cbNoBackBilling"));
alert("0");
}
else
{
if(mrcOrNbb == 1)
{
alert("1");
document.getElementById("cb_mrcFilter").checked=false;
document.getElementById("cbNoBackBilling").checked=true;
}
}
}
The ASP code:
<asp:CheckBox ID="cb_mrcFilter" runat="server" Text="Only MRC" OnClick="mrcAndNbbFilterChanged(0)" />
<asp:CheckBox ID="cbNoBackBilling" runat="server" Text="No back billing" OnClick="mrcAndNbbFilterChanged(1)" />
ASP.NET applies that ctl00_-esque string to IDs when using ASP controls to ensure they are unique. You can get the ASP-modified ID value using:
document.getElementById("<%= cb_mrcFilter.ClientID %>").checked=false;
document.getElementById("<%= cbNoBackBilling.ClientID %>").checked=true;
Also, as a side note, you can use else if { ... }, rather than else { if { ... } } when only dealing with one alternative:
if(mrcOrNbb == 0) {
...
}
else if(mrcOrNbb == 1) {
...
}
Related
I am using this to check if fields are empty. The problem is, the error message is never thrown when a field is empty, it allows submission. Is it because I am trying to run onclick and onclientclick on the button? This is my syntax
HTML
<asp:Button ID="main1212" runat="server" Text="Check If JS Works"
OnClick="DoSomethingDoNothing_OnClick" OnClientClick="return ValidateData();" />
JS
<script type="text/javascript">
function ValidateData() {
var main1212, dropdownselection, dropdownselection1, field21
main1212 = document.getElementByID("txt313").value;
dropdownselection = document.getElementByID("dropdownlist1").value;
dropdownselection1 = document.getElementByID("dropdownlist11").value;
field21 = document.getElementByID("txt12").value;
if (main1212 == '')
{
alert("Error");
return false;
}
if (dropdownselection == '')
{
alert("Error");
return false;
}
if (dropdownlist1 == '')
{
alert("Error")
return false;
}
if (field21 == '')
{
alert("Error");
return false;
}}
</script>
EDIT
If I open the browser console and press the button that should run my script their are no errors displayed?
It's missing a semi-colon in this line (not sure) of the function ValidateData:
var main1212,dropdownselection,dropdownselection1,field21;
(it's good to avoid extra spaces and also not create variables for this)
And it could be more simple, or like this:
window.onload=function(){document.getElementById('main1212').onclick=function(){ValidateData();};}
i have to validate a radio button using javascript. it should show a message if none of the option is selected.
my radio button code is:
<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
<asp:ListItem></asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:RadioButtonList>
and the submit button is:
<asp:Button ID="next2" runat="server" Text=">>" Width="46px"
OnClientClick="return next2()"/>
the corresponding javascript function is :
function next2() {
var listItemArray = document.getElementById('<%=welldata.ClientID %>');
var isItemChecked = false;
var length1 = listItemArray.length;
for (var i=0; i<length1; i++)
{
var listItem = listItemArray[i];
document.write(listItem);
if ( listItem.checked )
{
alert(listItem.value);
isItemChecked = true;
}
}
if ( isItemChecked == false )
{
alert('Nothing is checked for welldata!');
return false;
}
return true;
}
while debugging i noticed thaat function is executed but doesn't enter the for loop.
also i tried
document.write(isItemChecked);
document.write(listItemArray);
document.write(length1);
and the output was :
false [object HTMLTableElement] undefined
The wellData RadioButtonList ASP.NET server control will render in the browser as a table with a number of input type="radio" controls under it, each with the same name.
So, you need to get the input tags inside the table tag first:
var wellData = document.getElementById('<%=welldata.ClientID %>');
var listItemArray = wellData.getElementsByTagName('input');
This is, of course, if you are doing this manually for some odd reason. You can do it automatically with a RequiredFieldValidator control.
<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
<asp:ListItem></asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="rfvWellData" runat="server" ControlToValidate="wellData" Display="Dynamic" ErrorMessage="Pick yourself some well data" />
You are using a RadiobuttonList which is rendered as table per default. If you select the dom element by id document.getElementById('<%=welldata.ClientID %>') then you are selecting the table and not the RadioButtonList. If you want to select the radio buttons then you have to loop through the childNodes of listItemArray to get the radio buttons. Alternatively you could use jquery to select the radio buttons, as their ids will start with the id of your radio button list (they will look like welldata_0 or welldata_1).
This line of jquery code will get the your radio buttons
var listItemArray = $("input[id^='welldata']")
Try this:
function next2() {
if(document.getElementById('<%=welldata.ClientID %>').checked==false)
{
alert('Nothing is checked for welldata!');
return false;
}
return true;
}
or
Use RequiredFieldValidator
<asp:RequiredFieldValidator
ID="ReqiredFieldValidator1"
runat="server"
ControlToValidate="welldata"
ErrorMessage="Select your welldata!"
>
Check these below links
http://asp-net-example.blogspot.in/2009/02/aspnet-requiredfieldvalidator-example.html
http://www.itechies.net/tutorials/jscript/jsexample.php-pid-jform.htm#rb
http://www.codeproject.com/Questions/499602/RequiredplusFieldplusValidatorplusForplusRadioplus
var rblItems = document.getElementById('<%=radioBtnListId.ClientID %>').getElementsByTagName('input');
var checkedItems = true;
for (var i = 0; i < rblItems.length; i++) {
if (rblItems[i].checked) {
checkedItems = true;
break;
}
else {
checkedItems = false;
}
}
if (!checkedItems) {//Hence No items checked
alert("Nothing is checked");
return false;
}
I have a Popup in my aspx page that i want to open based on criteria that has to be met by javascript. The problem i am having is that i cannot seem to get the modalpopupextender to work no matter what i try.
I have tried using PageMethods, _doPostBack() and $Find(PopupClientId).Show();
None of the above seem to work and i cannot figure out why.
This is my JavaScript.
function RequotePopup(popup, status) {
if (status = true) {
var thePopup = document.getElementById(popup);
thePopup.style.visibility = "visible";
} else {
alert("Please select a record for Re-Quote");
}
}
function checkGridView() {
var hdnCheckboxIDs = document.getElementById("ctl00_ContentPlaceHolder1_hdnCheckboxID");
var arrCheckboxIDs = hdnCheckboxIDs.value.split(",");
var checked = false;
for (var i = 0; i < arrCheckboxIDs.length; i++) {
if (arrCheckboxIDs[i] != "") {
var ckbItem = document.getElementById(arrCheckboxIDs[i]);
if (ckbItem != null) {
if (ckbItem.checked == true) {
checked = true;
}
}
}
}
if (checked == true) {
//var modal = $find('<%= ReQuoteBtn_ModalPopupExtender.ClientID %>');
//modal.show();
PageMethods.ShowExtender();
ShowPopup('RequotePopup');
} else {
alert("Please select a record for Re-Quote");
}
}
And This is my ASP.Net.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<asp:Button ID="ReQuoteBtn" runat="server" Text="Re-Quote" OnClientClick="Javascript:checkGridView()"
CssClass="Sales" />
<asp:ModalPopupExtender ID="ReQuoteBtn_ModalPopupExtender" runat="server" DynamicServicePath=""
BackgroundCssClass="modalBackground" Enabled="True" BehaviorID="RequoteModal" PopupControlID="RequotePopup"
TargetControlID="ReQuoteBtn" OnCancelScript="cmdCancelrq">
</asp:ModalPopupExtender>
I'm not sure if you have tried this, but it should work if you find the ModalPopupExtender by BehaviorID.
As your BehaviorID is RequoteModal, let try this sample:
To show the popup
$find('RequoteModal').show();
To hide the popup
$find('RequoteModal').hide();
Edit:
I just noticed that you set Enabled="False" for the ModalPopupExtender, this will not allow the modal to call show() method, you may got error message such "Unable to get property 'show' of undefined or null reference".
Please remove that setting and try again.
I tried this first which is not working:
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" OnClientClick="this.src='plus.gif';"/>
Another method:
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" OnClientClick=" return changeImg(this)"/>
function changeImg(cnt)
{
if(cnt.src='minus.gif')
{
cnt.src='plus.gif';
}
else
{
if(cnt.src='plus.gif')
{
cnt.src='minus.gif';
}
}
return false;
}
</script>
The issue here is that you do not return false, on client click and you trigger the onlick on code behind. Just return false; to avoid the post back and you get what you try.
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" OnClientClick="this.src='plus.gif';return false;"/>
update
On your code you type if(cnt.src='plus.gif'), but you must type == , not =
To avoid this type of error is better to place first the const, eg type
if('plus.gif' == cnt.src)
and the final code
function changeImg(cnt)
{
if(endsWith(cnt.src, 'minus.gif'))
{
cnt.src='plus.gif';
}
else if(endsWith(cnt.src, 'plus.gif'))
{
cnt.src='minus.gif';
}
// to avoid post back return false
return false;
}
function endsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
relative : endsWith in JavaScript
The following should work
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" onClick="function(){this.setAttribute("src", 'plus.gif');}"/>
I Have The Following JavaScript Function:
function validateLocality(object, args) {
if (document.getElementById("<%=ddlLocality.ClientID %>").value == "0") {
args.IsValid = false;
}
else {
args.IsValid = true;
}
}
and the following drop down list with validator:
<asp:DropDownList
ID="ddlLocality"
runat="server"
DataSourceID="DataSourceListTowns"
DataTextField="town_name"
DataValueField="town_id"
ToolTip="The Locality Where the User Lives"
AppendDataBoundItems="True"
ViewStateMode="Disabled">
<asp:ListItem Value="0">Select Locality</asp:ListItem></asp:DropDownList>
<asp:CustomValidator
runat="server"
ControlToValidate="ddlLocality"
ErrorMessage="Select Locality"
ToolTip="Select Locality"
ID="validateLocality"
ClientValidationFunction="validateLocality()">*</asp:CustomValidator>
The Thing Is It is not validating the drop-down at all.
Thanks For Any Help Cause I wrecked My Brain about this
The ClientValidationFunction should carry only the name of the function. It is not expecting to carrry a Javascript expression. Hence your attribute should look like: ClientValidationFunction="validateLocality" note no ().
Your function is taking 2 arguments:
function validateLocality(object, args)
But when you call it, you aren't passing any in..?
ClientValidationFunction="validateLocality()"
Add an alert to your function to make sure it's being called on the submit.
function validateLocality(object, args)
{
alert("working");
if (document.getElementById("<%=ddlLocality.ClientID %>").value == "0")
{
args.IsValid = false;
}
else
{
args.IsValid = true;
}
}