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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show animated gif AFTER form submit is clicked AND form validates

    Can anyone provide the javascript and/or jQuery code (preferably not ajax) to show an animated gif next to a form's submit button ONLY AFTER THE FORM SUCCESSFULLY VALIDATES and is in the process of submitting? Thanks in advance.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Submitting the form causes the page to refresh. So that is not possible.


    It is your responsibility to die() if necessary….. - PHP Manual

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 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[*/
    #img {
      display:none;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Verify(frm){
     if (frm['tom'].value!=''){
      document.cookie='check='+true+';expires='+(new Date(new Date().getTime()+1*86400000).toGMTString())+';path=/';
      return true;
     }
     return false;
    }
    
    
     function getcookie(){
      if (cookie('check')){
       document.getElementById('img').style.display='inline';
       document.cookie='check='+true+';expires='+(new Date(new Date().getTime()+-1*86400000).toGMTString())+';path=/';
      }
     }
    
     function cookie(nme){
      var re=new RegExp(nme+'[^;]+','i');
      if (document.cookie.match(re)){
       return document.cookie.match(re)[0].split("=")[1];
      }
      return null;
     }
    
    
    /*]]>*/
    </script>
    
    
    </head>
    
    <body onload="getcookie();" >
    <form  onsubmit="return Verify(this);" >
    <input name="tom"/>
    
    <input type="submit" name="" value="Submit" /><img id="img" src="http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif" />
    
    </form>
    </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/

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your replies guys. Vic, I tried implementing your code but it's not working for me (in IE or FF) when in place on my Unix host/server or testing on a Windows XP pc.

    Now I'm wondering if it may be better to just base the event of showing an animated image on the event of the browser waiting for the next web page while the form is being processed/handled/submitted. In other words, tie the display of the animated gif to whatever triggers IE8 and FF12 to display "Waiting for http://www.website.com..." in the status bar at the bottom of the browser window whenever you go to a webpage.

    But if someone can provide a javascript and/or jQuery to do the job based on the form submission/post, please note I actually have 2 fields that are being validated before the form submission/post can proceed.

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Vic, I'm wondering if your code isn't working for me because I didn't put onsubmit="return Verify(this);" in my form tag. I left it out because my form tag already has this code in it to validate the form: onsubmit="return validate(frm)". Is it possible to add "Verify(this);" to the tag? If so, can you show me the syntax? Thanks.

  • #6
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    I'm doubtful about how that will look if the form navigates to another page. I would prefer to delay the submission of the form in order to allow a minimum display time, as shown below. Either way, once the submission is initiated, any animated gif is likely to freeze until the next page loads.
    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>TEST</title>
    <style type="text/css">
    /*<![CDATA[*/
    #img {
      visibility : hidden
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function validate( frm )
    {
      if( /\S/.test( frm.tom.value ) )
      {
        setTimeout( function(){ frm.submit(); }, 500 );
        document.getElementById( 'img' ).style.visibility = 'visible';  
      }   
        
      return false;
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <form action='http://google.com' onsubmit="return validate(this);" >
    <input name="tom"/>
    
    <input type="submit" name="" value="Submit" /><img id="img" src="http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif">
    
    </form>
    </body>
    
    </html>

  • #7
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I see that both of the codes you guys provided work as standalone pages, but Logic Ali's delay lets you see the animated gif briefly before the form posts. My problem is when I integrate either of your codes into my form, neither one works. I think it may be because both of you are using onsubmit attributes in the form tag which I don't know how to add to my code because I have to use onsubmit="return validate(frm)" to validate 2 fields in the form. Is there any way to have 2 attributes for onsubmit in the form tag? And can you provide code to accommodate validation of 2 different fields, say "tom" and "bob", instead of just "tom"? Thanks very much.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    you will need to modify you existing verification

    Code:
    if (if the verification passes){
      document.cookie='check='+true+';expires='+(new Date(new Date().getTime()+1*86400000).toGMTString())+';path=/';
      return true;
     }
    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/

  • #9
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Vic, thank you. I'm having trouble implementing your code. It would be great if you could update my code below to include yours.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>TEST</title>

    </head>

    <body>

    <form name="frm" action="http://google.com" onsubmit="return validate(frm)">

    <input type="text" name="realname">realname<br />
    <input type="text" name="email">email<br />
    <input type="submit" name="" value="Submit" onClick="return confirmSubmit()">

    <script language="javascript">
    function validate(frm) {
    var inputFields = new Array("email" ,"realname");
    var counter;
    var name;
    var msg = "Please complete the following fields:\n";
    var badFields = "";
    for (counter = 0; counter < inputFields.length; counter++) {
    name = inputFields[counter];
    if (frm.elements[name].value.length == 0) {
    if (name == "email") {
    badFields = badFields + " - email \n";
    } else {
    badFields = badFields + " - " + name + "\n";
    }
    }
    }
    if (badFields.length != 0) {
    alert(msg + badFields);
    return false;
    }
    if (frm.email.value.length > 0) {
    return emailCheck(frm.email.value);
    } else {
    return true;
    }
    }

    function emailCheck(emailStr) {
    var emailPat=/^(.+)@(.+)$/;
    var specialChars="\\(\\)<>@,;:\\\\\\\"\\.\\[\\]";
    var validChars="\[^\\s" + specialChars + "\]";
    var quotedUser="(\"[^\"]*\")";
    var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/;
    var atom=validChars + '+';
    var word="(" + atom + "|" + quotedUser + ")";
    var userPat=new RegExp("^" + word + "(\\." + word + ")*$");
    var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$");
    var matchArray=emailStr.match(emailPat);

    if (matchArray==null) {
    alert("email address seems incorrect (check @ and .'s)");
    return false;
    }

    var user=matchArray[1];
    var domain=matchArray[2];

    if (user.match(userPat)==null) {
    alert("email address username seems incorrect");
    return false;
    }

    var IPArray=domain.match(ipDomainPat);
    if (IPArray!=null) {
    for (var i=1;i<=4;i++) {
    if (IPArray[i]>255) {
    alert("Destination IP address is invalid");
    return false;
    }
    }
    return true;
    }

    var domainArray=domain.match(domainPat);
    if (domainArray==null) {
    alert("email address domain name seems incorrect");
    return false;
    }

    var atomPat=new RegExp(atom,"g");
    var domArr=domain.match(atomPat);
    var len=domArr.length;
    if (domArr[domArr.length-1].length<2 || domArr[domArr.length-1].length>3) {
    alert("email address must end in three-letter domain, or two letter country");
    return false;
    }

    if (len<2) {
    var errStr="email address is missing hostname";
    alert(errStr);
    return false;
    }

    return true;
    }
    </script>


    </form>

    </body>
    </html>

  • #10
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump... still trying to figure out how to combine my code with Vic's or Logic Ali's above. Any assistance would be greatly appreciated. Thanks.

  • #11
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there a guru out there that can provide the magic solution here? I'd be most grateful. Thanks.


  •  

    Posting Permissions

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