Disable with jQuery submit button in ASP.NET Wizard Template

Question

I have an ASP.NET Web Forms application that uses the Wizard Template control.

In my wizard there are four pages (forms) and I would like to use jQuery in order to disable the submit button on the last page (the buttons on the other pages are just next and previous) I want to do this in order to prevent the user to click more times on the button, causing the forms to be submitted more than once.

The "issue"is that it is not possible to assign IDs to the submit button(s) since they are auto-generated (and I have explicitly asked not to modify this behavior).

I tried this jQuery but it does not work:

$('#form1').submit(function () {
        $(this).children('input[type=submit]').attr('disabled', 'disabled');
    });

Where form1 is the id of the form wrapping the wizard. Anybody might help?

Answer 1

1. You are missing the # before form1 in your selector.

2. You havent defined e

3. return false will do a preventDefault, no need for both

Edit:

Set the CssClass-attribute on the button to submitbutton

$('.submitbutton').click(function(){
    $(this).prop('disabled', true);
});

Or in your example i would suppose something like this would work

$(this).find(':submit').prop('disabled', true);

Answer 2

I found the solution. It is not a neat one but when you are dealing with messy controls provided by ASP.NET Web Forms, most of the times workarounds are the only possible solution.

The first step is to disable the automated generation of the finish button and then attach at the bottom of the wizard:

<FinishNavigationTemplate>
        <table cellpadding="3" cellspacing="3">
         <tr>
            <td>
               <asp:Button ID="btnPrevious" runat="server" Text="Previous"
                           CausesValidation="false" 
                           CommandName="MovePrevious"
                           CssClass="buttonStyle"/>
            </td>
            <td>
               <asp:Button ID="btnFinish" runat="server" Text="Finish"
                           onClientClick="this.disabled = true; this.value =  'Submitting...';  
                           this.className = 'buttonStyleDisabled';"   
                           UseSubmitBehavior="false"  
                           CausesValidation="true" 
                           CommandName="MoveComplete"
                           CssClass="buttonStyle"/>
            </td>  
          </tr>
        </table>
</FinishNavigationTemplate>

UPDATE:

In order to remove the automated generation of the finish button just remove the <FinishCompleteButtonStyle> tag from the Wizard