Develop Reference

how to disable button after first click in javascript

I am new to C#. I have a save button inside InsertItemTemplate. I have used the following code to disable the button after first click in java script but its not even working for the first click please help me.
<asp:ImageButton ID="imgbtnSave" runat="server" CommandName="Add" CausesValidation="true" OnClientClick="this.disabled='true';return true;" />

You are modifying the "disabled" property of the DOM object on the browser, but the button will do a post back to the server when it's clicked, so any change to the DOM will be lost.
On the function where you handle the command "Add" in your server code you must retrieve the button from the InsertItemTemplate and set its "Enabled" property to false, that will disable the control from the server side.
If you want to avoid multiple clicks while the page has not been reloaded then you need a client function to avoid this, something like this:
<asp:ImageButton ID="imgbtnSave" runat="server" CommandName="Add" CausesValidation="true" OnClientClick="return checkEnabled(this);" />
<!-- somewhere in your page -->
<script>
function checkEnabled(item)
{
if(item.disabled != 'true')
{
item.disabled = 'true';
return true;
}
return false;
}
</script>

ASP Textbox default invisible and visible from JS

I have a textbox which will be initally invisible and checkbox OnClick JS method , I want the button to be visible ,
initally the checkbox seems invisible but when i click on the checkbox, JS Method gives me the error with object not found. and if i remove the Visible="false" from textbox code works fine.
<asp:Textbox id="day" runat="server" Visible="false" />
<asp:CheckBox ID="parts" runat="server" onClick="Click();" />
<script type="text/javascript">
function Click(){
document.getElementById("day").style.visibility = "visible";
//ERROR **0x800a01a8 - Microsoft JScript runtime error: Object required**
}
</script>
//ERROR 0x800a01a8 - Microsoft JScript runtime error: Object required

When you use visible=false, that is never rendered on page, implies, you can not do document.getEle.., it will always give you null value and hence , it will throw error.
If this property is false, the server control is not rendered. - MSDN
How to solve this
So it make it work, you need to make it hidden using javascript and then make it visible using javascript.
<asp:TextBox ID="day" runat="server" style="display:none;" />
<asp:CheckBox ID="parts" runat="server" onClick="Click();" />
<script type="text/javascript">
function Click() {
document.getElementById("day").style.display = "block"; // use "none" to hide
}
</script>

Use the static id mode instead, to stop it using an auto-generated id:
e.g.
<asp:Textbox id="day" ClientIDMode="Static" runat="server" Visible="false" />
Also as you tagged this as jQuery the simpler jQuery could would look like this (if the code follows the elements on the page):
$('#day').click(function(){
$(this).show();
});
or this if the code precedes the elements, wrap it in a DOM ready handler:
$(function(){
$('#day').click(function(){
$(this).show();
});
});
$(function(){...}); is just a handy shortcut for $(document).ready(function(){...});

ASP.Net LinkButton Prevent Postback Not Working - JavaScript

I know how to prevent javscript within the href attribute from firing as evident in this JSFiddle (http://jsfiddle.net/mkarr/KNefK/)
However, when this logic is applied to an ASP.Net LinkButton as such:
<asp:LinkButton ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return formTest.validate(event);" OnClick="btnSubmit_Click"></asp:LinkButton>
which translates to:
<a onclick="return formTest.validate(event);" id="ctl00_m_g_87932399_e546_4e12_8297_982b811d8cea_ctl00_btnSubmit" href="javascript:WebForm_DoPostBackWithOptions('blah blah blah')">Submit</a>
The formTest.validate() method does execute correctly and returns false, but the WebForm_DoPostBackWithOptions is always fired immediately after!
Can anyone see any flaws in my logic that I cannot??
EDIT:
Also, several stack overflow solutions have been accepted for this issue but all of them are doing virtually what I have already done leading me to believe I'm missing something simple!
Disable the postback on an <ASP:LinkButton>
Prevent LinkButton post back OnClientClick not working. Why?
ANSWER:
Since I cannot answer my own question because I'm not reputable yet (LOL), here's an edit with the answer:
Going off #QBM5's original tip of not using ASP.Net controls, I solve the problem, although I still do not know why the initial problem occurred in the first place (does anyone when it comes to ASP.Net? Turn it off, then back on comes to mind here) :o)
I replaced the LinkButton ASP.Net control with the following:
<input type="submit" value="Submit" id="btnSubmitButton" runat="server" OnServerClick="btnSubmitButton_Click" class="submitBtn" />
I then bound the .submitBtn's click event via jQuery:
$('.submitBtn').on('click', function (e) {
if (!instance.validate()) {
e.preventDefault();
}
});
The trick is to use OnServerClick and runat="server" on the control but getting away from LinkButton was the goal and the postback behavior is completely different.
which translates to this:
<input onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(''); " type="submit" id="ctl00_m_g_87932399_e546_4e12_8297_982b811d8cea_ctl00_btnSubmitButton" value="Submit" class="submitBtn">
Anyone want to take a stab at the root cause? I need to move foward so don't have time. :o)

The following is working for me, by changing element.href = "#"
<asp:LinkButton ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return ClientSideValidation()" OnClick="btnSubmit_Click"></asp:LinkButton>
Javascript validation
function ClientSideValidation() {
var element = document.getElementById("<%=txtAmount.ClientID%>");
element.href = "";
if (element.value == "") {
element.href = "#";
return false;
}
return true;
}

Ignore .NET validators if element is hidden (display: none)

We often come into problems with .NET validators on elements that are hidden using javascript/css (ie. display:none)
For example (there may be syntax errors but don't worry about it)
<asp:CheckBox ID="chkNewsletter" runat="server" Checked="true" />
...
<div id='newsletterOnly'>
<asp:TextBox ID="txtEmail" runat="server" />
<asp:RequiredFieldValidator ID="vldEmail" ControlToValidate="txtEmail" ErrorMessage="Required" runat="server" />
</div>
with JavaScript:
$('#chkNewsletter').changed(function() {
$(this).is(':checked') ? $('#newsletterOnly').show() : $('#newsletterOnly').hide();
});
It should not validate txtEmail if it is hidden.
You can't submit the form if newsletterOnly is hidden, because the RequiredFieldValidator is still effective eventhough it is hidden :(
And you can't even see the validator error message because it is hidden
Is there any way around this?
I am trying to avoid PostBacks to improve user experience.
I wish I could modify .NET javascript to validate controls only when they are visible.

I wrote this as a general solution (can be used on all .NET websites).
You only need to add an OnClientClick to the submit button.
//===================================================================
// Disable .NET validators for hidden elements. Returns whether Page is now valid.
// Usage:
// <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="DisableHiddenValidators()" />
//===================================================================
function DisableHiddenValidators() {
for (var i = 0; i < Page_Validators.length; i++) {
var visible = $('#' + Page_Validators[i].controltovalidate).is(':visible');
ValidatorEnable(Page_Validators[i], visible)
}
return Page_ClientValidate();
}
To use it, simply include the above javascript and add the class OnClientClick="DisableHiddenValidators()" to the submit button:
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="DisableHiddenValidators()" />
EDIT:
jQuery $(submitButton).click function didn't work on iPhone/Android. I have changed the sample code above slightly.
If anyone see anything wrong or possible improvements please comment :)

It can also be a good idea to use Validation Groups in a situation like this. If you can group your validators then specify on the Button which validation group you need to validate against, only those validators in the group will be validated. Read more here:
http://msdn.microsoft.com/en-us/library/vstudio/ms227424(v=vs.100).aspx

Magic: Thankyou!
Modified slightly to include the ValidationGroup it resides in..
function DisableHiddenValidators(validationGroup) {
for (var i = 0; i < Page_Validators.length; i++) {
var isVisible = $('#' + Page_Validators[i].controltovalidate).is(':visible');
var isValGrp = (Page_Validators[i].validationGroup === validationGroup);
ValidatorEnable(Page_Validators[i], (isValGrp && isVisible)); //Turn on only if in Validation group and IsVisible = true
}
return Page_ClientValidate(validationGroup);
}
To add Custom DisableValidators method to the click event tree:
$('#myButtonControlId').on("click", function(e) { DisableHiddenValidators('Send'); });

Can I run some custom script after ASP.NET client side page validation fails?

I'm trying to run some client side script if, and only if, the client side Page validation fails, and can't figure out where I can hook it in.
If i bind my JavaScript function to the OnClientClick of the button that submits the form, it runs before the client side validation. If I bind it to the OnSubmit of the form, that only fires if the validation passes.
Any ideas of how or where I can hook something like this up? Or if you have other suggestions, I'm open to them.
<form id="frm" runat="server"
onsubmit="FUNCTION HERE WONT FIRE IF VALIDATION FAILS">
<asp:requiredfieldvalidator id="vld" runat="server" controltovalidate="txt"/>
<asp:textbox id="txt" runat="server"></asp:textbox>
<asp:button id="cmd" runat="server" OnClick="dosomething"
OnClientClick="FUNCTION FIRES BEFORE VALIDATION OCCURS">
</form>

Add script below at the end of page's markup file:
var originalValidationFunction = Page_ClientValidate;
if (originalValidationFunction && typeof (originalValidationFunction) == "function") {
Page_ClientValidate = function (validationGroup) {
originalValidationFunction(validationGroup);
if (!Page_IsValid) {
// your code here
alert("oops!");
}
};
}

Try using Page_ClientValidate("") to trigger validation from JavaScript, and then you can run some custom code:
validate = function(){
var isValid = Page_ClientValidate(""); //parameter is the validation group - thanks #Jeff
if (isValid){
isValid = somethingToCheck();
}
return isValid;
}
<asp:Button ID="Button1" runat="server" CausesValidation="false" OnClientClick="return validate();" ... />

So you have two options how to handle it:
Use CustomValidator validator which provides ClientValidationFunction feature and inside your custom validation function obviously you know whether validation failed. It gives you as much as you need flexibility on client side validation by accepting a JavaScript function to be used whilst validation.
Check validator satus by accessing it via JavaScript by accessing validator's isValid property from JavaScript (+jQuery):
var anonymousValidator = $("#<%= vldCommentText.ClientID %>")[0];
ValidatorEnable(anonymousValidator, true);
if (!anonymousValidator.isvalid)
{
// ...
}