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
    Regular Coder
    Join Date
    Jun 2002
    Posts
    101
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show image when pressing submit button in form

    When pressing the submit button in a form, I need a script that shows an image (gif) embedded in the form. The image must be invisible until the submit button is pressed.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    hi there Pompiuses,

    this little example puts an image into an <input> and a <textares>
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>image on submit</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    #txtara {
         width:400px;
         height:432px;
     }
    .one {
         background:#ffdddd;
     }
    .two {
         background:url(http://hstrial-dbayly.homestead.com/files/anim2.gif);
         border: solid 4px #600060;
     }
    .three {
          background:#ddddff;
     }
    .four { 
         background:url(http://hstrial-dbayly.homestead.com/files/dog.jpg);
         border: double 8px #000000;
     }
     /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    function showImage() {
         document.forms[0][0].className="two";
         document.forms[0][1].className="four";
         
    }
    //]]>
    </script>
    
    </head>
    <body>
    
    
    <form action="">
    <div>
    <input class="three" type="text"/>
    <textarea  class="one"id="txtara"></textarea>
    <input type="submit" onclick="showImage();return false" value="submit"/>
    </div>
    </form>
    
    </body>
    </html>
    coothead

  • #3
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead
    document.forms[0][0]...
    document.forms[0][1]...
    Hey now, that's a nifty shortcut-reference; thanks coothead!

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there neofibril,

    Yes, it's so logical isn't it

    coothead

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by neofibril
    Hey now, that's a nifty shortcut-reference; thanks coothead!
    You can even make it shorter even more.
    Code:
    function showImage(f) {
         f[0].className="two";
         f[1].className="four";
         
    }
    ...
    <input type="submit" onclick="showImage(this.form);return false" value="submit"/>

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good stuff!


  •  

    Posting Permissions

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