jquery-steps : disable submit button when form are submited

Question

I'm using jquery-steps.js ,

I want to disable submit button when some one click on submit, and never activate it until the the form is submitted.

The reason way is that if some one click on submit many time the I receive many mails!

Note : my HTML file does not include submit button , it is only show from the js file that I include bellow

and my js file look like this.

$(function() {
    $("#smart-form").steps( {
        bodyTag:"fieldset", headerTag:"h2", bodyTag:"fieldset", transitionEffect:"slideLeft", titleTemplate:"<span class='number'>#index#</span> #title#", labels: {
            finish: "Send søknad", next: "Neste", previous: "Tilbake", loading: "Laster..."
        }
        , onStepChanging:function(event, currentIndex, newIndex) {
            if(currentIndex>newIndex) {
                return true;
            }
            var form=$(this);
            if(currentIndex<newIndex) {}
            return form.valid();
        }
        , onStepChanged:function(event, currentIndex, priorIndex) {}
        , onFinishing:function(event, currentIndex) {
            var form=$(this);
            form.validate().settings.ignore=":disabled";
            return form.valid();
        }
        , onFinished:function(event, currentIndex) {
            var form=$(this);
            $(form).ajaxSubmit( {
                target:'.result', beforeSubmit:function() {}
                , error:function() {}
                , success:function() {
                    $('.alert-success').show().delay(7000).fadeOut();
                    $('.field').removeClass("state-error, state-success");
                    if($('.alert-error').length==0) {
                        $('#smart-form').resetForm();
                        reloadCaptcha();
                    }
                }
            }
            );
        }
    }

Your html may not include the submit button but you can select it by using jquery selectors and knowing the parent element — mattygee, Jun 16 '16 at 19:31
On your page, right click on the submit button (or an area near it) and do inspect element. This will pop up the developer window and will navigate to a container nearby. You can look at the ids from there. If you need help, paste what you see surrounding the submit button — mattygee, Jun 16 '16 at 19:37

score 0 · Answer 1 · answered Jun 16 '16 at 20:04

0

This might be a bit generic (and I haven't tested it) but that can get you started

$(document).find('input[type="submit"').prop('disabled', 'disabled');

answered Jun 16 '16 at 20:04

vegas2033

250
1
4
16

Master DJon · Answer 2 · 2016-06-17T20:24:18.877

0

After the first line $(function() {, add :

var isFinishing = false;

In the onFinished event change this line :

var form=$(this);

for :

if (isFinishing) return;

isFinishing = true;
var form=$(this);

If the success event of the AJAX call isn't reloading the page, you shall consider adding this line within this function :

isFinishing = false;

edited Jun 17 '16 at 20:24

answered Jun 16 '16 at 21:58

Master DJon

1,899
2
19
30

Maybe the "button" is not a button. Can you inspect this "submit button" and check what is its HTML ? – Master DJon Jun 17 '16 at 20:02
the button is generated on js file not on html, i can not see it on html file , how ever when I do inspect element i get this Send søknad – Marvos Jun 17 '16 at 20:05
That's what I thought. I'll change the answer. – Master DJon Jun 17 '16 at 20:22
I'm sad to tell you that is not working, now I cannot move to the final step to see the submit button I'm really thankful for your reply – Marvos Jun 17 '16 at 22:48
Can you update your code so I can see what you have did ? Or even better, can you create a jsFiddle so I can work with it ? – Master DJon Jun 17 '16 at 22:52

jquery-steps : disable submit button when form are submited

2 Answers2

Linked