Question

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

这是codrops脚本：

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

这是我使用的修改后的javascript，也已添加到codepen的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()函数调用_reinit()。这会导致重复的事件绑定，因此当我们沿着表单移动时，this.current会增加两次。要解决此问题，应创建一个与_init()相同的新功能，但bindEvents()函数调用被移除in _reinit()除外。

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

2 个答案: