?
Solved

Problem in disabling the image button after submit

Posted on 2011-10-21
7
Medium Priority
?
1,108 Views
Last Modified: 2012-08-13
To avoide multiple submit before user is redirected to another page, I am trying to hide the image button and display the loading image once the user click on image button,
The code I have added is not working please review and let me know  what is wrong with it

Thanks
<asp:ImageButton runat="server" ID="imgbutton" ImageUrl="~/assets/en/site/buttons/img1.gif"
                      CommandName="Complete1" AlternateText="Place order" CssClass="checkmenge" onclientclick="if ( Page_ClientValidate() ) { this.style.visibility='hidden';ctl00$MainContentArea$CheckoutWizardModule1$CheckoutWizard$FinishNavigationTemplateContainerID$ImageButton1.style.visibility='visible';}" 
                        usesubmitbehavior="false" />
                        <asp:ImageButton runat="server" ID="ImageButton1" ImageUrl="~/assets/en/site/icons/ajax-loader.gif" style="display:none;" />

Open in new window

0
Comment
Question by:shieldguy
  • 3
  • 2
  • 2
7 Comments
 
LVL 13

Expert Comment

by:ansudhindra
ID: 37006528
try
Page_ClientValidate() ) { this.style.display='none';.....
0
 
LVL 13

Expert Comment

by:ansudhindra
ID: 37006531
I mean.. like below code..
 
<asp:ImageButton runat="server" ID="imgbutton" ImageUrl="~/assets/en/site/buttons/img1.gif"
                      CommandName="Complete1" AlternateText="Place order" CssClass="checkmenge" onclientclick="if ( Page_ClientValidate() ) { this.style.display='none';ctl00$MainContentArea$CheckoutWizardModule1$CheckoutWizard$FinishNavigationTemplateContainerID$ImageButton1.style.display='block';}" 
                        usesubmitbehavior="false" />
                        <asp:ImageButton runat="server" ID="ImageButton1" ImageUrl="~/assets/en/site/icons/ajax-loader.gif" style="display:none;" />

Open in new window

BR-Sudhindra-www.clicksperday.com
0
 
LVL 1

Author Comment

by:shieldguy
ID: 37006869
I had tried your code but it didnt work
The first image get hidden but loading image never appear on screen how can I get its real id may be thats what is wrong?

here is the output html of second image button

<input id="ctl00_MainContentArea_CheckoutWizardModule1_CheckoutWizard_FinishNavigationTemplateContainerID_ImageButton1" type="image" style="border-width:0px;display:none;" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContentArea$CheckoutWizardModule1$CheckoutWizard$FinishNavigationTemplateContainerID$ImageButton1", "", true, "", "", false, false))" src="/assets/en/site/icons/ajax-loader.gif" name="ctl00$MainContentArea$CheckoutWizardModule1$CheckoutWizard$FinishNavigationTemplateContainerID$ImageButton1">
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 83

Expert Comment

by:CodeCruiser
ID: 37008295
Replace this

ctl00$MainContentArea$CheckoutWizardModule1$CheckoutWizard$FinishNavigationTemplateContainerID$ImageButton1

with

'<%= ImageButton1.ClientID %>'
0
 
LVL 1

Author Comment

by:shieldguy
ID: 37017138
Hello its still not working, the code you had asked me to add on the webform for some reason is not actually getting executed so its not generating the client id

please see the attched code

Thanks
--#####The Webform code########

 <asp:ImageButton runat="server" ID="imgNext" ImageUrl="~/assets/en/site/buttons/place-order.gif"
                      CommandName="moveao" AlternateText="Place your order" CssClass="checkout-payment-page" onclientclick="if ( Page_ClientValidate() ) { this.style.display='none';<%= ImageButton1.ClientID %>.style.display='block';}" 
                        usesubmitbehavior="false" />
                        <asp:ImageButton runat="server" ID="ImageButton1" ImageUrl="~/assets/en/site/icons/ajax-loader.gif" style="display:none;" />  






--#####The output html code#####

<input id="ctl00_MainContentArea_CheckoutWizardModule1_CheckoutWizard_FinishNavigationTemplateContainerID_imgNext" class="checkout-payment-page" type="image" style="border-width:0px;" onclick="if ( Page_ClientValidate() ) { this.style.display='none';'<%= ImageButton1.ClientID %>'.style.display='block';};WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContentArea$CheckoutWizardModule1$CheckoutWizard$FinishNavigationTemplateContainerID$imgNext", "", true, "", "", false, false))" alt="Place your order" src="/assets/en/site/buttons/place-order.gif" usesubmitbehavior="false" name="ctl00$MainContentArea$CheckoutWizardModule1$CheckoutWizard$FinishNavigationTemplateContainerID$imgNext">
<input id="ctl00_MainContentArea_CheckoutWizardModule1_CheckoutWizard_FinishNavigationTemplateContainerID_ImageButton1" type="image" style="border-width:0px;display:none;" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContentArea$CheckoutWizardModule1$CheckoutWizard$FinishNavigationTemplateContainerID$ImageButton1", "", true, "", "", false, false))" src="/assets/en/site/icons/ajax-loader.gif" name="ctl00$MainContentArea$CheckoutWizardModule1$CheckoutWizard$FinishNavigationTemplateContainerID$ImageButton1">






<input id="ctl00_MainContentArea_CheckoutWizardModule1_CheckoutWizard_FinishNavigationTemplateContainerID_imgNext" class="checkout-payment-page" type="image" style="border-width:0px;" onclick="if ( Page_ClientValidate() ) { this.style.display='none';'<%= ImageButton1.ClientID %>'.style.display='block';};WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContentArea$CheckoutWizardModule1$CheckoutWizard$FinishNavigationTemplateContainerID$imgNext", "", true, "", "", false, false))" alt="Place your order" src="/assets/en/site/buttons/place-order.gif" usesubmitbehavior="false" name="ctl00$MainContentArea$CheckoutWizardModule1$CheckoutWizard$FinishNavigationTemplateContainerID$imgNext">
<input id="ctl00_MainContentArea_CheckoutWizardModule1_CheckoutWizard_FinishNavigationTemplateContainerID_ImageButton1" type="image" style="border-width:0px;display:none;" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContentArea$CheckoutWizardModule1$CheckoutWizard$FinishNavigationTemplateContainerID$ImageButton1", "", true, "", "", false, false))" src="/assets/en/site/icons/ajax-loader.gif" name="ctl00$MainContentArea$CheckoutWizardModule1$CheckoutWizard$FinishNavigationTemplateContainerID$ImageButton1">

Open in new window

0
 
LVL 83

Accepted Solution

by:
CodeCruiser earned 2000 total points
ID: 37027701
Have you tried changing

onclientclick="if ( Page_ClientValidate() ) { this.style.display='none';<%= ImageButton1.ClientID %>.style.display='block';}"

to

onclientclick="if ( Page_ClientValidate() ) { this.enabled=false;}"
0
 
LVL 1

Author Comment

by:shieldguy
ID: 37029776
No your suggestion above didnt work
the only thing which is working is this one

onclientclick="if ( Page_ClientValidate() ) { this.style.visibility='hidden';}"

but this will hide the button and I also want to show some image which show user to wait until request is completed

Any more suggestion, I dont undrestand why javascript is not working on my page
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month13 days, 12 hours left to enroll

755 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question