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="back">&lt;
Back</button>
    <button type="submit" name="action" value="next" class="next">Next
&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?

Reply via email to