SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form animation on submit

    In some web 2.0 forms when you click the submit button,
    a kind of animation appears to indicate "Processing".
    How is this achieved?

    Thanks

  2. #2
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    First you would need to define a function that would be triggered upon submission of the form. Something like:

    HTML Code:
    <form onsubmit="showProcessingDiv();">
    Then you would need to actually write the javascript function:

    Code:
    function showProcessingDiv() {
    document.getElementById("ProcessingDiv").className = "Processing";
    }
    You need a bit of CSS which would hide the processing div initially and also creates a class called "Processing" which shows the div.

    Code:
    #ProcessingDiv {
    display: none;
    }
    
    .Processing {
    display: block;
    }
    Inside of the processing div you would place the animated image that you would like to indicate that the form is processing.
    TAKE A WALK OUTSIDE YOUR MIND.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •