进度栏提交动画后提交表单

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