jQuery-шаги: отключить отправку по клику - PullRequest
Новая
       40

jQuery-шаги: отключить отправку по клику

0 голосов
/ 07 июня 2018

Я хочу отключить кнопку Готово в форме шагов jQuery, как только она была нажата.В настоящее время пользователи могут повторно отправлять форму, нажимая кнопку Готово несколько раз.

Есть пара предложений о том, как подойти к этому , которые не решили проблему для меня.Я мог видеть первый в действии - цвет кнопки изменился согласно коду - но это не помешало мне повторно отправлять мою форму.

Мой JavaScript ниже (я не уверен, что HTML будет информативным здесь, но может включать и его);у кого-нибудь есть предложения как к этому подойти?Является ли onFinishing неподходящим местом для отключения кнопки?

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

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Вы всегда можете использовать обработчик отправки, чтобы отключить нажатие кнопки, а затем функцию успеха, чтобы снова включить его после отправки / проверки формы. 

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

Обновление

В зависимости от вашей скрипки вы можете поочередно скрывать кнопку, когда пользователь дойдет до последней кнопки и щелкнет по ней, а затем, когда текущий индекс не равен 7, просто показать все снова.

Впредоставленная вами скрипта изменит ваш код JS на этот, и вы поймете, о чем я говорю. 

$("#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: {

        }
});

Но вот обновление вашей скрипки, я не уверен, как долго эта ссылка будет действующейхотя:

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

0 голосов
/ 07 июня 2018

Заменить $ (this) .attr ('disabled', true);с $ (this) .attr ('отключено', 'отключено');

Надеюсь, это сработает !!

...