CODEWITHSUNDEEP
javascriptjqueryjquery-steps
Marvos
Marvos

Reputation: 15

jquery-steps : disable submit button when form are submited

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();
                    }
                }
            }
            );
        }
    }

Upvotes: 0

Views: 1519

Answers (2)

Master DJon
Master DJon

Reputation: 1965

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;

Upvotes: 0

vegas2033
vegas2033

Reputation: 250

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');

Upvotes: 0

Related Questions