I'm trying to set a button's enable/disable based on a checkbox being checked or not. Below is my javascript and asp code, which doesn't work. I am not sure if the function is not called at all, or something is wrong with how I disable the button.
<script type="text/javascript">
function OnChkAgreeChanged(chkAgree) {
if (document.getElementById"chkAgree").checked)
document.getElementById("btnSubmit").SetEnabled(true);
else
document.getElementById("btnSubmit").SetEnabled(false);
}
</script>
<asp:checkbox ID="chkAgree" runat="server"
Text="blablabla" onchange="javascript:OnChkAgreeChanged(this);"/>
<dx:ASPxButton ID="btnSubmit" runat="server" Text="Submit"
UseSubmitBehavior="true" AutoPostBack="true" Width="175px"
CssClass="submitButton" OnClick="btnSubmit_Click" enabled="false">
</dx:ASPxButton>
DevExpress creates a client instance object for each one of it's various controls. In this case it will create an ASPxClientButton for btnSubmit. Since you haven't given btnSubmit a ClientInstanceName, you can access it like so:
window.aspxGetControlCollection().elements['<%= btnSubmit.ClientID %>'];
That means your entire handler function could look something like this:
function OnChkAgreeChanged(chkAgree)
{
btnSubmit = window.aspxGetControlCollection().elements['<%= btnSubmit.ClientID %>'];
if(!(btnSubmit === null || btnSubmit === undefined)) { btnSubmit.SetEnabed(chkAgree.checked); }
}
You could also make your life easier by defining the ClientInstanceName attribute like so:
<dx:ASPxButton ID="btnSubmit" ClientInstanceName="btnSubmit" runat="server" Text="Submit"
UseSubmitBehavior="true" AutoPostBack="true" Width="175px"
CssClass="submitButton" OnClick="btnSubmit_Click" enabled="false">
</dx:ASPxButton>
Then, you'd be able to use that directly in your handler:
function OnChkAgreeChanged(chkAgree)
{
if(!(btnSubmit === null || btnSubmit === undefined)) { btnSubmit.SetEnabed(chkAgree.checked); }
}
You'll note that I like to check if that thing is null or not because if you set the display to none in the Code-Behind or otherwise disable it, it's very likely the DevExpress magic/voodoo (pick one) won't emit the JS creating that instance object.
chkAgree is an object not a string. You don't have to use document.getElementById. Try this...
<script type="text/javascript">
function OnChkAgreeChanged(chkAgree) {
if (chkAgree.checked)
document.getElementById("btnSubmit").disabled = null;
else
document.getElementById("btnSubmit").disabled = true;
}
</script>
Also, in onchange="javascript:OnChkAgreeChanged(this);" javascript: may not be required. Pls check ASP documentation.
JQuery Solution
$(document).ready(function () {
$('#chkAgree').click(function () {
if (this.checked) {
$("#btnSubmit").prop('disabled', false);
}
else {
$("#btnSubmit").prop('disabled', true);
}
});
});
Or if you want to do same thing using JavaScript can use solution suggested by mohkhan.
Use the ClientInstanceName and ClientEnabled (not the Enabled) properties for this purpose:
function OnChkAgreeChanged(chkAgree) {
var checked = chkAgree.checked;
btnSubmit.SetEnabled(checked);
}
</script>
<asp:checkbox ID="chkAgree" runat="server" Text="blablabla" onchange="OnChkAgreeChanged(this);"/>
<dx:ASPxButton ... ClientInstanceName="btnSubmit" ClientEnabled="False">
</dx:ASPxButton>
Related
I have a Telerik:RadListView control and multiple checkboxes in it. I need to validate those checkboxes before submitting the form.
I have tried build-in validators with ControlToValidate property but it gave me the error Control 'chkQuestion' referenced by the ControlToValidate property of 'chkQuestionValidator' cannot be validated. which is very logical because they are all in a RadListView.
After that, i created a CustomValidator;
<asp:CheckBox ID="chkQuestion"
CssClass="AcceptedAgreement"
Visible="true"
runat="server"
Text=" I confirm"
AutoPostBack="false" />
<asp:CustomValidator
ClientValidationFunction="CheckBoxRequired_ClientValidate"
EnableClientScript="true"
ID="chkQuestionValidator"
runat="server"
Enabled="true"
SetFocusOnError="true"
ErrorMessage="Please confirm"
ForeColor="Red" />
these are all in Telerik:RadListView which means i have multiple of them but i cant link them in my client-side custom validator function.
Here is my validator function:
function CheckBoxRequired_ClientValidate(sender, e) {
var c = jQuery(".AcceptedAgreement input:checkbox");
var chb = validator
if (c.is(':checked')) {
e.IsValid = true;
} else {
e.IsValid = false;
}
}
but with this function i cant validate them seperately. when one of the checkboxes checked, this function act like all of them are checked. this is because they all have same css class, and this is the point i stucked.
if you help me, it will be appreciated.
For those who come here for solution, here it is:
function handleSubmitForm(sender, args) {
var c = jQuery(".AcceptedAgreement input:checkbox");
c.each(function (index) {
if (!c[index].checked) {
args.set_cancel(true);
}
});
args.set_cancel(true);
}
basically i assign this piece of code to my button, it is called before doing postback, and if it does not fit my condition, it stops the postback. you can do whatever you want in if clause.
you can call this function :
<telerik:RadButton ID="btnSubmit"
OnClientClicking="handleSubmitForm"
Text="Submit" OnClick="btnSubmit_Click" />
I have four text boxes in 4 different tabs of an ASP.NET Page. I need to provide same validation message to all the text boxes. Presently I am using four different functions with same functionality. Kindly suggest a way to identify which textbox is being used make that a single funtion
Code from Commend:
<asp:TextBox ID="textBox1" runat="server" ValidationonGroup="abcd"></asp:TextBox>
<asp:CustomValidator ID="ID1" runat="server" ValidationGroup="abcd"
ControlToValidate="textBox1" ErrorMessage="message"
ClientValidationFunction="fname"></asp:CustomValidator>
--Javascript Fn--
function fname(sender, args) {
var x = document.getElementById('<%=txtBox1.ClientID%>').value;
if (some condition) {
args.IsValid = false;
} else {
args.IsValid = true;
}
}
Edit
if you are using Asp.Net then you should use like this
Aspx page code
<div>
<asp:TextBox runat="server" ID="txt1" ClientIDMode="Static" onKeyPress="javascript:text_changed(this.id);"></asp:TextBox>
</div>
JS Code
<script type="text/javascript">
function text_changed(event)
{
var id = event;
alert(id);
}
</script>
You got the textbox id in id variable and now u can get value etc using this id you are applying your conditions.... i hope this will help u
I have some javascript that "freezes" the screen when a submit button is pressed. This is to stop double clickers.
I have discovered that there is an issue if a validator control returns false, in that, the screen has "frozen", so the user can't fix the problem with their input data.
I need to be able to tell if the page is valid or not, so that if it is not, i can un-freeze the screen.
How can I do this??
javascript code that freezes the screen... (originally from 4guysfromrolla)
function FreezeScreen(msg) {
var outerPane = document.getElementById('FreezePane');
var innerPane = document.getElementById('InnerFreezePane');
if (outerPane) outerPane.className = 'FreezePaneOn';
}
code that runs the javascript...
<asp:Button ID="btnSubmit" runat="server" Text="<%$ Resources:LocalizedText, button_SubmitOrder %>" onclick="btnSubmit_Click" ValidationGroup="validateHeader" OnClientClick="FreezeScreen();" />
It will probably be something like this.
function ValidatePage() {
FreezeScreen();
if (typeof (Page_ClientValidate) == 'function') {
Page_ClientValidate();
}
if (Page_IsValid) {
UnFreezeScreen();
return true;
}
else {
UnFreezeScreen();
return false;
}
}
And on the button
<asp:Button ID="btnSubmit" runat="server" Text="<%$ Resources:LocalizedText, button_SubmitOrder %>" onclick="btnSubmit_Click" ValidationGroup="validateHeader" OnClientClick="return ValidatePage();" />
I have two javascript functions to change background color on enter and leave events.
function ColoronEnter()
{
var txt1 = document.getElementById("<%=txtID1.ClientID%>");
txt1.style.backgroundColor = "red";
}
function ColoronLeave()
{
var txt2 = document.getElementById("<%=txtID1.ClientID%>");
txt2.style.backgroundColor = "";
}
I am calling them as
<asp:TextBox ID="txtID1" runat="server" MaxLength="20" AutoCompleteType="FirstName" onfocus="ColoronEnter()" onblur="ColoronLeave()" ></asp:TextBox>
It is working well. But I want to apply one javascript function to all my textboxes. I have tried something like
function onEnter(_input)
{
var input = _input;
document.getElementById(input).style.backgroundColor ="yellow";
}
function onLeave(_input)
{
var input = _input;
document.getElementById(input).style.backgroundColor ="";
}
trying to call them as
<asp:TextBox ID="txtID2" runat="server" onfocus="onEnter(txtID2)" onblur="onLeave(txtID2)"></asp:TextBox>
<asp:TextBox ID="txtID3" runat="server" onfocus="onEnter(txtID3)" onblur="onLeave(txtID3)"></asp:TextBox>
It is throwing an error as
Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined.
How can I call one function to all my textboxes. Thank in advance.
Use like
<asp:TextBox ID="txtID2" runat="server" onfocus="onEnter(this)" onblur="onLeave(this)"></asp:TextBox>
<asp:TextBox ID="txtID3" runat="server" onfocus="onEnter(this)" onblur="onLeave(this)"></asp:TextBox>
function onEnter(_input)
{
_input.style.backgroundColor ="yellow";
}
function onLeave(_input)
{
_input.style.backgroundColor ="";
}
If you don't have any restrictions to use jQuery, use jQuery hover event to handle this.
I have a problem that is making me crazy. On my page I have one Javascript validation and two ASP.NET validators. The validation outcome depends just on the result of the Javascript. That means if the Javascript returns true the ASP.NET validators are not checked.
The Javascript code is:
<script type="text/javascript">
function Validate() {
var ddlObj = document.getElementById('<%=ddStatus.ClientID%>');
var txtObj = document.getElementById('<%=txtComment.ClientID%>');
if (ddlObj.selectedIndex != 0) {
if (txtObj.value == "") {
alert("Any change of Status requires a comment!");
txtObj.focus();
return false;
}
}
}
</script>
Instead the two ASP.NET validators are:
<td><asp:TextBox runat="server" ID="txtSerialNr" ></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="txtSerialNr" ErrorMessage="***" />
</td>
<td><asp:TextBox runat="server" ID="txtProdName" ></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="rfv1" ControlToValidate="txtProdName" ErrorMessage="***"></asp:RequiredFieldValidator></td>
Anybody might help? Thanks
UPDATE:
I call the Javascript from a button:
<asp:Button runat="server" ID="btnSubmit" Text="Save New Product"
style="cursor:hand" OnClick="btnSubmit_Click" />
But I register the attribute from the code-behind:
protected void Page_Load(object sender, EventArgs e)
{
btnSubmit.Attributes.Add("OnClientClick", "return Validate()");
}
You can fire the client side validation from within the Validate() function:
validate = function(){
bool isValid = Page_ClientValidate(""); //triggers validation
if (isValid){
var ddlObj = document.getElementById("<%=ddStatus.ClientID%>");
var txtObj = document.getElementById("<%=txtComment.ClientID%>");
if (ddlObj.selectedIndex != 0) {
if (txtObj.value == "") {
alert("Any change of Status requires a comment!");
txtObj.focus();
isValid = false;
}
}
}
return isValid;
}
Markup:
<asp:Button runat="server" OnClientClick="return validate();" ... />
OK, there's a couple of things wrong here.
If you are concerned enough to do validation, you must ALWAYS do server-side validation in addition to client-side. Client-side validation is very user-friendly and fast to respond, but it can be bypassed simply by setting JavaScript to 'off'!
I don't see where you've told your controls which JavaScript function to call when they validate? You use RequiredFieldValidators which don't require an external function - but then attempt custom validation using your Validate() function.
If you do end up using a CustomValidator, then you'll need to change the 'signature' of your function. It needs to be of the form
function validateIt(sender, args){
var testResult = //your validation test here
args.IsValid = testResult;
}