CODEWITHSUNDEEP
javascriptjqueryhtmlajaxsubmit
kris_IV
kris_IV

Reputation: 2444

Animation after submiting

I have questioner in HTML and one submit button:

    <Input type = "Submit" Name = "Submit6" VALUE = "Dalej >">

I use jQuery to protect situation that user can click two times in submit button with this code:

<script>
    $('form').submit(function(){
        $(this).find(':submit').attr('disabled','disabled');
    }); 
</script>

Now I want develop this part of script to show also gif animation during loading process. I saw that my users don't know why this system doesn't work and they try to click next time submit but it's disable.

I have two idea how can I solve it. One is show gif animatino (like ajax or something different) and second extinguish the page with animation. First will be more easy and for me is OK.

Can you give me tips?

Upvotes: 0

Views: 1554

Answers (3)

Tanmay
Tanmay

Reputation: 96

If you are using Bootstrap, there is a component for this kind of functionality,

http://getbootstrap.com/javascript/#buttons

Getting inspired from this I've also created a button that toggles classes while making it enabled or disabled, and based on the current class you can show different texts on each state

<button class="btn-progressive">
    <span class="button-label">Log In</span> 
    <i class="icon-spinner icon-large icon-spin"></i>
</button>

and using css you can do,

.btn-progressive .icon-spinner { display: none; }

.btn-progressive.progressing .icon-spinner { display: inline; }

.btn-progressive.progressing .button-label { display: none; }

So while toggling button's enable state, we can also toggle 'proressing' class.

P.S. If you are ok with CSS3 compatibility, you can also use disabled attribute for these CSS rules

Upvotes: 0

Hossain Muctadir
Hossain Muctadir

Reputation: 3626

Assuming you are using ajax request to post your data to server,

Add an image to the html page,

<img id='waiting' src="waiting.gif" style="display:none"/>

And change the script like this,

<script>
    $('form').submit(function(){
        $(this).find(':submit').attr('disabled','disabled');
        $("#waiting").css("display","block");
        $.post("/url/to/post/data", function(){        
          $("#waiting").css("display","none");
        });
    }); 
</script>

Upvotes: 2

Tuyoshi Vinicius
Tuyoshi Vinicius

Reputation: 861

use the button instead of sumit

$(document).ready(function(e) {
    $("form :button").click(function(){
        $(this).attr('disabled','disabled');
        $("html").fadeOut("1000",function(){ // fade animation
            $("form").submit();
        });
    })
});

Upvotes: 0

Related Questions