jQuery-steps: disable submit on click

Question

I want to disable the Finish button in a jQuery-steps form once it has been clicked. Currently, users are able to repeatedly submit the form by clicking the Finish button multiple times.

There are a couple suggestions on how to approach this that did not solve the problem for me. I could see the first one in action - the color of the button changed as per the code - but it didn't stop me from being able to repeatedly submit my form.

My JavaScript is below (I'm not sure HTML would be informative here but could include it as well); does anyone have suggestions for how to approach this? Is onFinishing not the appropriate place to be disabling the button?

  $("#form").steps({
            stepsOrientation: "vertical",
            bodyTag: "fieldset",
            onStepChanging: function (event, currentIndex, newIndex) {
               omitted for brevity
            },
            onStepChanged: function (event, currentIndex, priorIndex) {
                omitted for brevity}
            },
            onFinishing: function (event, currentIndex) {
                var form = $(this);

                //Applying colour for finish button
                var result = $('ul[aria-label=Pagination]').children().find('a');
                $(result).each(function () {
                    if ($(this).text() == 'Finish') {
                        $(this).attr('disabled', true);
                        $(this).css('background', 'green');
                    }
                });

                form.validate().settings.ignore = ":disabled, :hidden";

                // Start validation; Prevent form submission if false
                return form.valid();
            },
            onFinished: function (event, currentIndex) {
                var form = $(this);
                event.preventDefault();
                getResult();
                enableFinishButton: false;
                // Submit form input
                //form.submit();
            }
        }).validate({
            errorPlacement: function (error, element) {
                $('#step1Errors').append(error);
            },
            rules: {omitted for brevity},
            messages: {omitted for brevity}
        });

if there is an error OR on an incomplete form, it will be disabled and no one can proceed even after the correction — Rohit.007, Jun 07 '18 at 16:58

ViaTech · Accepted Answer · 2018-06-08T15:36:11.897

You can always use submit handler to disable the button click and then the success function to enable it again after the form has been submitted/passed validation.

submitHandler: function() { 
    $(".yourButton").prop('disabled', true);
},
success: function(response){
        //success process here
       $(".yourButton").prop('disabled', false); 
}

Update

Based on your fiddle, you can alternately hide the button when the user makes it to the final button and clicks it, then when the current index is not 7, simply show everything again.

In the fiddle you provided change your JS code to this and you will see what I am talking about.

$("#example-vertical").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    onStepChanged: function (event, currentIndex, priorIndex) {
        if(currentIndex != 7){
            var result = $('ul[aria-label=Pagination]').children().find('a');
            $(result).each(function () {
                $(this).css('display', 'block');        //turn everything visible again
            });
        }
        if (currentIndex === 1 && priorIndex === 0) {

        }
        },
        onFinishing: function (event, currentIndex) {
            var form = $(this);
            var result = $('ul[aria-label=Pagination]').children().find('a');
            $(result).each(function () {
                if ($(this).text() == 'Finish') {
                    //$(this).attr('disabled', 'disabled');
                    //$(this).css('background', 'green');
                    $(this).css('display', 'none');
                    alert("Now you cannot click the #finish button twice,"+ 
                        "press Previous and it will reappear");
                }
            });

        form.validate().settings.ignore = ":disabled, :hidden";

        return form.valid();
        },
        onFinished: function (event, currentIndex) {
            alert(event+":"+currentIndex);
            var form = $(this);
            event.preventDefault();
            getResult();
            // enableFinishButton: false;
            // Submit form input
            //form.submit();
        },
    stepsOrientation: "vertical", 
    }).validate({
        /* 
        submitHandler: function() { 
            alert("submit handler function not being called, validate not working");
            $("#finish").prop('disabled', true);
        },
        success: function(response){
            alert("success function not being called, validate not working");
            $("#finish").prop('disabled', false); 
        },
        */

        errorPlacement: function (error, element) {
            $('#step1Errors').append(error);
        },
        rules: {
        },
        messages: {

        }
});

But here is an update to your fiddle, I'm not sure how long this link will be live though:

https://jsfiddle.net/n1a0zLpk/1/

Do you know how I would find the replacement text for ".yourButton" with jQuery-steps? I'm getting stuck because steps is generating the button outside of my HTML. If it helps, what I see when I inspect the element is Finish — LToohey, Jun 07 '18 at 17:04
I am not sure I am understanding what you are asking. #finish is either an anchor tag or an ID of an element, you would change the selector to #finish instead of .yourButton...what do you mean "replacement text"? — ViaTech, Jun 07 '18 at 17:14
thanks, that answered my question - by replacement text, I meant that I knew you intended "your button" to be changed to something else but I wasn't sure what. I assume the submitHandler should be included in validate since it's there in the validate documentation, is that what you intended? If so I'm seeing the same problem. I put it in a fiddle here: https://jsfiddle.net/n1a0zLpk/ — LToohey, Jun 08 '18 at 14:01
Hmm...I am seeing the issue you are talking about, it seems to be occurring because you are attempting to set the disabled attribute to an Object, not a form field. Validate() is also not being called in the fiddle, so the submit handler and success functions are not applicable. I have an answer that will do what you want an alternate way though — ViaTech, Jun 08 '18 at 15:04
Check my update, it will give you an alternate way to do what you are asking. There is not a disabling of the Finish button, but now we hide it and re-show it when the Previous button is clicked — ViaTech, Jun 08 '18 at 15:15

score 0 · Answer 2 · answered Jun 07 '18 at 16:54

0

Replace $(this).attr('disabled', true); with $(this).attr('disabled', 'disabled');

I hope it will work!!

answered Jun 07 '18 at 16:54

Sidhanshu_

1,714
1
7
10

Thanks for your answer! This did not change the behavior of the form for me though. – LToohey Jun 07 '18 at 16:58
1

And still if it doesn't works for you, please provide fiddle so that I can see and correct it. – Sidhanshu_ Jun 07 '18 at 17:08
I am using jquery-steps so my code looks quite a bit different. There is a fiddle here: https://jsfiddle.net/n1a0zLpk/ – LToohey Jun 08 '18 at 13:57

score 0 · Answer 3 · answered Aug 25 '20 at 08:55

0

if yout want hide #finish/span Finish. Just modify file steps.min.js and wizard_steps.js

on steps.min.js search word where Finish and #finish and delete that word.
on wizard_step.js just comment the all of onFinished function

answered Aug 25 '20 at 08:55

Naufal Dwi Maulana

1
1

jQuery-steps: disable submit on click

3 Answers3