how to disable button after first click in javascript - 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>

Related

Changing the cursor in asp.net using JavaScript

I'm trying to change the cursor to an hourglass in my asp.net application.
Add this javascript
funcion hourglass() {
document.body.style.cursor = "wait";
}
Then in my code in the page load event:
button.Attributes.Add("onclick","hourglass()")
when I click the button, the cursor changes but the system freezes and does not reload the page!
Any tips?
You need to use OnClientClick
button.OnClientClick = "hourglass(); return true;";
Reference: https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.onclientclick(v=vs.110).aspx
Use button like this
<asp:Button ID="btn" ClientIDMode="Static" runat="server" Text="Button Text" OnClick="btnRefresh_Click" CssClass="btn" OnClientClick="hourglass(); return true;"/>
While going to server side it will change your cursor and code behind function will execute

How to focus a error after disable button 1st click using asp.net?

I have written code in asp.net for disable button after 1st click. Code is below:
<asp:Button ID="btnNext" runat="server" CssClass="btn btnBlue btnStep" Text="Submit"
OnClick="btnSubmit_Click" CausesValidation="true" ValidationGroup="ServiceFee" OnClientClick="this.disabled = true; this.value = 'In progress...';__doPostBack('btnNext','')" UseSubmitBehavior="false" />
It is working fine no problem but now I need to add little extra functionality i.e. I need to focus on error. When user clicks on submit button without entering card details or personal details it will show error at empty text box and suddenly page will reload, because i have written dopostback in javascript. So how to focus on error and after postback need to show error?
In the btnNext event you can have something like
// Supose txtCardDetails is the TextBox with the card details
if (string.IsNullOrWhiteSpace(txtCardDetails.Text))
{
ClientScript.RegisterStartupScript(this.GetType(), "script", "document.getElementById('" + txtCardDetails.ClientID + "').focus();");
return; // Maybe you want to do something before leave the event method
}
this will send a script to focus the field, BUT, I recommend to do the validation in the client side (JS) and in the Server side (C#), so, validating this in the client side should be like this
<asp:Button ID="btnNext" runat="server" ...
OnClientClick="return SubmitIfValid(this);" ... />
function SubmitIfValid(el) {
if(document.getElementById('<%= txtCardDetails.ClientID %>').value === ''){
alert('invalid card details');
document.getElementById('<%= txtCardDetails.ClientID %>').focus();
return false;
}
// more validations
// if all is OK then...
el.disabled = true;
el.value = 'In progress...';
__doPostBack('btnNext','')
return true;
}
You can use validation controls like validationSummary. Managing errors like those by yourself can be very difficult.

How to disable link button after click (no JQuery)

I want to disable link button after user click on it.
But I made something wrong here.
Button is still enabled after click. What am I doing wrong?
<asp:LinkButton ID="submit" runat="server"
CssClass="button"
Text="OK"
OnClick="Submit_Click"
OnClientClick="this.disabled=true">
</asp:LinkButton>
Just give return false; to your JavaScript. The reason is that your asp:LinkButton is getting rendered like this.
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$submit','')"
class="button"
id="ContentPlaceHolder1_submit"
onclick="this.disabled = true;return false;">
OK</a>
So, if you do not give return false, these things happens
It fires the onclick event and disables the anchor tag. (anchor tag does not have a disabled property. button and input type="submit" has that property.)
It moves on to fire the postback and hits the server side click event
As there is a postback, the client side JavaScript disabling wont persist (even if it were a button)
By enforcing return false you are asking the asp:LinkButton not to do anymore processing.
P.S: I have been using PostBack Ritalin to prevent multiple clicks on asp:Button. IMO, its definitely worth a look in this case.
Use the javascript debugger to check the method is being called. LinkButtons are server generated javascript powered anchor tags & therefore can be tricky.
Try this java script function ,
On your OnClientClick
<asp:LinkButton ID="submit" CssClass="button" Text="OK" onclick="myButtonId_Click(this);return false;" ></asp:LinkButton>
add function ,
protected void myButtonId_Click(target) {
target.disabled = true;
}

BUTTON ONCLICK ONSERVERCLICK

I am facing a problem with buttons.
I want a client side validation to occur(say selecting a maximum of only 4 checkboxes in a datalist).
I used a INPUT TYPE="BUTTON" RUNAT="SERVER" style of tag. and put Onserverclick="someservermethod" which works fine.
I wrote a Validate() and added onclick="return validate();" to the above HTML markup and was thinking if it returns false then my server side code someservermethod() would not execute and it works great as expected
But when I return true I thought it would fire my someservermethod(), but it is not working. Any thoughts on why it is not working?
HTML MARKUP BELOW FOR THE BUTTON
button onclick="return ValidateSelection();" type="button" id="btnSubmit"
runat="server" onserverclick="btnSubmit_Click"
JAVASCRIPT CODE
function ValidateSelection()
{
if(good)
{
// I expect that my server side code btn_Submit would have got called. But
// it doesn't get called.
return true;
}
else
{
//This works great. Not calling the server side method for the button
alert('something happened');
return false;
}
}
I think I am messing up with the formatting. Pardon me.
The control you are using right now it HtmlButton which is not "fit" for what you are trying to do, as your onclick overwrites the required client side code for the post back.
What you need is the Button control which does support overwriting the client side onclick and still perform the post back as usual.
Change the markup to this and it should work:
<asp:button OnClientClick="return ValidateSelection();" id="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit"></asp:Button>

How to...Add Client Side function to button that postsback?

I have a button that closes a modal dialog box on an ASP.NET Ajax form. How do a add a client side function to be called on the same button click?
currently firebug has this for the onclick
javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$DefaultContent$btnPaymentActionDetailClose", "", true, "", "", false, false))
can I just add a click handler with jQuery? I don't want to wipe out the postback as it is necessary for the forms functionality.
Can I use
$("#buttonId").bind("click", function(e){
runAnotherFunction();
});
And not interfere with the existing postback?
Actually truth be told, I want to exec the function when the modal dialog closes. Do ajax control toolkit widgets fire any type of events? I know I can find the behavior and call show and hide. Can I attach my function to exec when modal.hide() is executed?
Thanks for any advice,
~ck in San Diego
Yes, you can definitely have your ASP:Button run Javascript on the client before posting back. It's the OnClientClick property of the webcontrol.
You won't need jQuery for this.
<asp:button id="btn" runat="server" onClientClick="SomeJsFunction()"
onClick="ServerSideMethod()" Text="Hello Button" />
<script language='javascript'>
function SomeJsFunction()
{
alert('hi');
}
</script>
If you're interested controlling whether the postback occurs or not, you could return and check for true/false from the result of your Javascript function.
function SomeJsFunction()
{
var isGood = false;
return isGood;
}
<asp:button id="btn" runat="server" onClientClick="return SomeJsFunction()"
onClick="ServerSideMethod()" Text="Hello Button" />
(thanks to Ralph for the nudge in the comments)

Categories

Resources