0

Im currently working on a new project that has a modal window on all the pages which houses the login form. Currently the form just displays, then when the user click 'Login', the value 'Login' changes to 'Processing' and after 5 seconds the form submits. I like the way this does this, but I would like to add a loading image that shows when the user clicks submit. So for this I intend to change the '' to '' but the thing is I am not sure in what way I can implement this.

Currently my page looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="../realcms/v0.2/admin/css/style.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

                <script src="http://code.jquery.com/jquery.js"></script>
                <script src="js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
    <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
<div id="myModal" class="modal hide">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p><form action="../realcms/v0.2/admin/login.php" method="POST" id="login-form">

            <fieldset>


                <p>
                    <label for="login-username">username</label>
                    <input type="text" name="login-username" id="login-username" class="round full-width-input" autofocus="">
                </p>

                <p>
                    <label for="login-password">password</label>
                    <input type="password" name="login-password" id="login-password" class="round full-width-input">
                </p>

                <p>I've <a href="#">forgotten my password</a>.</p>

                <input type="button" name="loginButton" id="login" value="<img src='http://www.signaltrader.com/images/loading_circle.gif' height='25px' width='25px'>" class="button round blue image-right ic-right-arrow">
                <input type="hidden" src="http://www.signaltrader.com/images/loading_circle.gif" name="image" width="60" height="60">

            </fieldset>

            <br>

        </form></p>
  </div>
  <div class="modal-footer">
    <a data-loading-text="Loading..." data-toggle="modal"  href="#myModal2" class="btn">Close</a><button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
  </div>
</div>
<script type="text/javascript">
var form = document.getElementById("login-form");

form.onsubmit = function() { return false; } // ensure ENTER won't cause submit

form.loginButton.onclick = function( )
{
    this.value = "Process";
    setTimeout( function() { form.submit(); }, 5000 );
}
</script>
</body>
</html>
4

2 回答 2

0

You can string together several actions on the button, or add additional timeouts if needed. This is just an example of adding a few more manipulations into your click function.

form.loginButton.onclick = function( )
{
    var button = $(this);
    button.attr('value','Process').css('border','green').attr('data-loading','true');
    $('#loading-img').show();

    setTimeout( function() { alert('this thing is totally loading!'); }, 2500 );
    setTimeout( function() { $('#loading-img').hide(); form.submit(); }, 5000 );
}
于 2013-06-27T22:54:16.513 回答
0

DEMO: http://jsfiddle.net/jonocairns/8gSan/

Used a img element instead of an imput element.

<img src="http://www.signaltrader.com/images/loading_circle.gif" id="image" width="60" height="60" style="display:none;" />

then added some javascript

form.loginButton.onclick = function( )
{
    **document.getElementById('image').style.display = 'block';**
    this.value = "Process";
    setTimeout( function() { form.submit(); }, 5000 );
}
于 2013-06-27T22:57:37.657 回答