CODEWITHSUNDEEP
javascriptjqueryhtmlformsanimation
user3810795
user3810795

Reputation: 162

Submit form after progress bar submit animation

I need your help.

I have some submit buttons with an animation, here is a working demo:

http://plnkr.co/edit/KhDdXWYnj3kVxhiKaEFL

But now the submit don't works, just ask and play animation. not submit the form 

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

this is the code for animation:

[].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 );
                }
            } );
        } );

Before to the animation I had this and works fine, but now I just want press button, animation and submit without confirm validation

    function message1() {

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

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

You know how can I do that ? Thanks for your help !

Upvotes: 0

Views: 1397

Answers (1)

user2844991
user2844991

Reputation:

Well, first make sure you remove that onclick attribute if you don't want to prompt that question anymore. Second, make sure your button, along with all the other fields, is wrapped inside a form tag, like this:

<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>

Third, in JS, after the progress is done just submit the form:

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

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

Upvotes: 1

Related Questions