[jQuery] [validate] form with multiple buttons and multiple submit handlers

[BalusC]

I've a paged form with back and next buttons on each form.
Each button invokes an ajaxSubmit() using submitHandler.
Next button should display next form using slideUp() and slideDown().
Back button should display previous form using slideUp() and slideDown
().

Here's an example of 2nd form (step) with 2 buttons (back and next).

HTML
[code]
form id=step2form
button type=submit name=action value=back class=backlt;
Back/button
button type=submit name=action value=next class=nextNext
gt;/button
/form
[/code]

jQuery
[code]
$('#step2form button.back').click(function() {
$('#step2form').validate({
submitHandler: function() {
$('#step2form').ajaxSubmit();
$('#step1form').slideDown(500);
$('#step2form').slideUp(500);
}
});
});
$('#step2form button.next').click(function() {
$('#step2form').validate({
submitHandler: function() {
$('#step2form').ajaxSubmit();
$('#step3form').slideDown(500);
$('#step2form').slideUp(500);
}
});
});
[/code]
The code looks the same for other forms.

Bot buttons works fine on the very first submit of the form,
regardless which button was clicked first. But on the subsequent
submits of the same form, the initially used submitHandler seems to be
used instead. I.e. when 'back' was first clicked and later when you
click 'next' on the same form, then the submitHandler set by 'back' is
been used instead (and vice versa).

As far as my knowledge concerns, it look like that the submitHandler
appends the new functions to the form's submit event instead of
overriding/replacing them. This will cause that only the first
functions will be used until it returns false.

Should I see this as a bug or a feature? How can I solve/workaround
this the best way?

[jQuery] [validate] form with multiple buttons and multiple submit handlers

[BalusC]

I thought I already have added the [validate] tag to the subject?
Anyway, now it's done again.

On Apr 17, 12:31 pm, BalusC bal...@gmail.com wrote:
 I've a paged form with back and next buttons on each form.
 Each button invokes an ajaxSubmit() using submitHandler.
 Next button should display next form using slideUp() and slideDown().
 Back button should display previous form using slideUp() and slideDown
 ().

 Here's an example of 2nd form (step) with 2 buttons (back and next).

 HTML
 [code]
 form id=step2form
     button type=submit name=action value=back class=backlt;
 Back/button
     button type=submit name=action value=next class=nextNext
 gt;/button
 /form
 [/code]

 jQuery
 [code]
     $('#step2form button.back').click(function() {
         $('#step2form').validate({
             submitHandler: function() {
                 $('#step2form').ajaxSubmit();
                 $('#step1form').slideDown(500);
                 $('#step2form').slideUp(500);
             }
         });
     });
     $('#step2form button.next').click(function() {
         $('#step2form').validate({
             submitHandler: function() {
                 $('#step2form').ajaxSubmit();
                 $('#step3form').slideDown(500);
                 $('#step2form').slideUp(500);
             }
         });
     });
 [/code]
 The code looks the same for other forms.

 Bot buttons works fine on the very first submit of the form,
 regardless which button was clicked first. But on the subsequent
 submits of the same form, the initially used submitHandler seems to be
 used instead. I.e. when 'back' was first clicked and later when you
 click 'next' on the same form, then the submitHandler set by 'back' is
 been used instead (and vice versa).

 As far as my knowledge concerns, it look like that the submitHandler
 appends the new functions to the form's submit event instead of
 overriding/replacing them. This will cause that only the first
 functions will be used until it returns false.

 Should I see this as a bug or a feature? How can I solve/workaround
 this the best way?