Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2012
    Location
    Leicester
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Page refresh x seconds after button click

    Hi all,
    I am currently working on a new project and have started to explore jquery / javascript. More specifically modal windows. I have been using twitter bootstrap for the base of my pages and currently am trying to work out how I can:

    Have a button that, once clicked - the text changes like seen here --http://twitter.github.io/bootstrap/javascript.html#buttons

    and then after x seconds, i want the page to 'submit' and be processed by a php script

    so basically there is a login form on my modal window.
    the submit button I want to say 'Login' at all times, but then when the user clicks the button I want the text to change to 'Processing' and then after a certain amount of time want the form to be submitted like any other php form.

    I have tried to explain my situation as much as I can.
    I look forwad to hearing from you

    Thanks in advance
    Dean

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Not hard.

    Code:
    ...
    <body>
    ...
    <form id="myForm" ...>
    ...
    <input type="button" name="loginButton" value="Login" />
    </form>
    ...
    <script type="text/javascript">
    var form = document.getElementById("myForm");
    
    form.onsubmit = function() { return false; } // ensure ENTER won't cause submit
    
    form.loginButton.onclick = function( )
    {
        this.value = "Processing";
        setTimeout( function() { form.submit(); }, 5000 );
    }
    </script>
    </body>
    </html>
    5000 is 5 seconds.

    Note that the script goes JUST BEFORE the </body> tag.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Mar 2012
    Location
    Leicester
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Not hard.

    Code:
    ...
    <body>
    ...
    <form id="myForm" ...>
    ...
    <input type="button" name="loginButton" value="Login" />
    </form>
    ...
    <script type="text/javascript">
    var form = document.getElementById("myForm");
    
    form.onsubmit = function() { return false; } // ensure ENTER won't cause submit
    
    form.loginButton.onclick = function( )
    {
        this.value = "Processing";
        setTimeout( function() { form.submit(); }, 5000 );
    }
    </script>
    </body>
    </html>
    5000 is 5 seconds.

    Note that the script goes JUST BEFORE the </body> tag.
    Okay this is great and seems to be what i am looking for, but the button that I want to submit the form is actually a button that is part of the modal window. Is this possible? or is this just making my aim more trouble than its worth.

    Thanks
    Dean

  • #4
    New Coder
    Join Date
    Mar 2012
    Location
    Leicester
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question just quickly

    Would it also be possible to add a gif image where the 'Processing' text is displayed once clicked. I have tried this by changing it to

    this.value = "Processing<img src='loading_circle.gif' height='25px' width='25px'>";

    but this seemed not to work

    thanks again
    Dean

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Are you talking about an MSIE modal window? You do know those don't work in any other browser.

    If you are talking about a popon <div>, then yes, it should work.

    Maybe you could show the code you use to create the modal window?

    And no, you can't put an image inside a <input type="button">.

    You could put it inside <button type="button" ....>...text or image or both...</button>

    You need to show more of your code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
            <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
            <head>
              <title></title>
            <style type="text/css">
            /*<![CDATA[*/
    
            #mask {
              position:fixed;z-Index:100px;left:0px;bottom:0px;width:100%;height:0px;background-Color:#FFCC66;
            /* Moz */
              opacity: .5;
            /* IE5-7 */
              filter: alpha(opacity=50);
            /* IE8 */
               -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            }
    
            #thanks {
              position:fixed;z-Index:101px;left:200px;top:-1200px;width:400px;height:300px;background-Color:#FFFFCC;border:solid red 1px;font-Size:40px;text-Align:center;
            }
    
            /*]]>*/
            </style></head>
    
            <body>
            <form onsubmit="return zxcSplashMessage.Open('thanks');" action="mypage.php" >
            <input name="tom" />
            <input type="submit" name="" value="Submit" />
            </form>
    
            <div id="mask" onmouseup="zxcSplashMessage.Open('thanks',true);" ></div>
            <div id="thanks" >Thank You<br /><br />
            <input type="button" name="" value="Submit" onmouseup="document.forms[0].submit();" />
            <input type="button" name="" value="Close" onmouseup="zxcSplashMessage.Open('thanks',true);" />
            </div>
            <script type="text/javascript">
            /*<![CDATA[*/
    
            zxcSplashMessage={
    
             Open:function(id,ud){
              var o=this['zxc'+id],ud=ud!==true;
              if (o){
               ud?o.msk.style.height=o.msk.offsetTop+'px':null;
               o.mess[0].style.left=(o.msk.offsetWidth-o.w)/2+'px';
               o.mess[0].style.top=(o.msk.offsetHeight-o.h)/2+'px';
               this.animate(o,o.mess,o.mess[3],o.mess[ud?1:2],new Date(),o.ms,ud);
              }
              return false;
             },
    
             init:function(o){
              var id=o.MessageID,msk=document.getElementById(o.MaskID),ms=o.Animate,mess=document.getElementById(id),w,h;
              if (mess){
               w=mess.offsetWidth;
               h=mess.offsetHeight;
               msk=msk||document.createElement('DIV');
               msk.style.position='fixed';
               msk.style.left='0px';
               msk.style.bottom='0px';
               msk.style.width='100%';
               msk.style.height='0px';
               o=this['zxc'+id]={
                mess:[mess,[0,w,h,0],[h/2,w/2,h/2,w/2],[h/2,w/2,h/2,w/2]],
                w:w,
                h:h,
                msk:msk,
                ms:typeof(ms)=='number'&&ms>0?ms:1000
               }
               document.body.appendChild(msk);
               document.body.appendChild(mess);
              }
             },
    
             animate:function(o,a,f,t,srt,mS,ud){
              clearTimeout(a[7]);
              var oop=this,ms=new Date()-srt,n,z0=0;
              for (;z0<4;z0++){
               n=(t[z0]-f[z0])/mS*ms+f[z0];
               a[3][z0]=Math.max(Math.round(isFinite(n)?n:a[4][z0]),0);
              }
              oop.cng(a,a[3]);
              if (ms<mS){
               a[7]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,ud); },10);
              }
              else {
               ud==false?o.msk.style.height='0px':null;
               oop.cng(a,t);
              }
             },
    
             cng:function(a,t){
              a[0].style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)';
             }
    
            }
    
            zxcSplashMessage.init({
             MessageID:'thanks',
             MaskID:'mask',
             Animate:1000
            });
    
    
    
    
            /*]]>*/
            </script></body>
    
            </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

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