简体   繁体   中英

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

这可能有点通用(我还没有测试过),但是可以帮助您入门

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

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;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM