javascript - 进度条提交动画后提交表单

Question

我需要你的帮助。

我有一些带有动画的提交按钮，这是一个工作演示:

http://plnkr.co/edit/KhDdXWYnj3kVxhiKaEFL

但是现在提交不起作用，只能询问并播放动画。不提交表格

<button type="submit" name="send_approve" onClick="return message1()" class="progress-button" data-style="rotate-back" data-perspective data-horizontal>Enviar </button>

这是动画代码:

[].slice.call( document.querySelectorAll( 'button.progress-button' ) ).forEach( function( bttn ) {
            new ProgressButton( bttn, {
                callback : function( instance ) {
                    var progress = 0,
                        interval = setInterval( function() {
                            progress = Math.min( progress + Math.random() * 0.1, 1 );
                            instance._setProgress( progress );

                            if( progress === 1 ) {
                                instance._stop(1);
                                clearInterval( interval );
                            }
                        }, 200 );
                }
            } );
        } );

在动画之前我有这个并且工作正常，但现在我只想按下按钮，动画并提交而不进行确认验证

    function message1() {

             var r = confirm("¿ Sure to submit ?");
            if (r == true) {
            return true;

                            }
    else    {
            alert('it didnt work');
            return false;
            }   
                    }           

你知道我该怎么做吗？ 感谢您的帮助!

Answer 1

好吧，如果您不想再提示该问题，请首先确保删除该 onclick 属性。 其次，确保您的按钮以及所有其他字段都包含在 form 标记内，如下所示:

<form name="theForm" method="GET" action="http://www.google.ro/search">
    <input name="q" type="text" placeholder="enter search keyword" />

    <button type="submit" <!-- rest of the attributes except for onclick -->>
         <!-- rest of the content, like those spans go here -->
    </button>
</form>

第三，在JS中，进度完成后只需提交表单:

if ( progress === 1 ) {
    instance._stop(1);
    clearInterval( interval );

    document.forms["theForm"].submit();
}