在 settimeout 后回到多步最小形式的第一步

Question

我正在使用 copdrops stepsForm.js 并以某种方式对其进行了修改。一切都很好，但由于我对 javascript 不太熟悉，所以在提交表单后无法回到第一步（第一个问题）。

这是 codrops 脚本：

这是我在提交后重置表单并返回到第一个问题（步骤）所做的修改。

这是我使用的修改后的 javascript，也已添加到代码笔的末尾 javascript:

var theForm = document.getElementById( 'theForm' );

new stepsForm( theForm, {
    onSubmit : function( form ) {
        // hide form
        classie.addClass( theForm.querySelector( '.simform-inner' ), 'hide' );
        var messageEl = theForm.querySelector( '.final-message' );
        messageEl.innerHTML = 'Thank you! We\'ll be in touch.';
        classie.addClass( messageEl, 'show' );

        setTimeout(function(){
                form.reset()
            }, 2500);
        setTimeout(function(){
            classie.removeClass( messageEl, 'show' )
        }, 3000);
        setTimeout(function(){
            classie.removeClass( theForm.querySelector( '.simform-inner' ), 'hide' )
        }, 3500);
    }
} );

Answer 1

JSBIN DEMO

// submits the form
    stepsForm.prototype._submit = function() {
        this.options.onSubmit( this.el );
        // Once the form is submitted, let's reset
        var self = this;
        setTimeout(function() {
            self.current = 0;
            self.isFilled = false;
            self._init();
            self._progress();
        }, 3500);
    }

在setTimeout的末尾，放置

setTimeout(function(){
    classie.removeClass( theForm.querySelector( '.simform-inner' ), 'hide' );
    $("ol.questions li").removeClass("current");
}, 3500);

Answer 2

Afshin 是对的。即使在第二轮输入任何值之前，也会出现验证问题。调试后我发现原因是因为 self._init(); 在 onSubmit() 函数中被调用，该函数又调用 bindEvents()。这会导致重复的事件绑定，因此当我们沿着表单移动时，this.current 会增加两次。要解决此问题，应创建一个新函数（例如 _reinit()），它与 _init() 相同，只是删除了 bindEvents() 函数调用 in _reinit().

在 settimeout 后回到多步最小形式的第一步

get back to the first step in multistep minimal form after settimeout

html

javascript

css

jquery

settimeout