...

View Full Version : Show image when pressing submit button in form



Pompiuses
06-15-2004, 01:01 PM
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.

coothead
06-15-2004, 01:58 PM
hi there Pompiuses,

this little example puts an image into an <input> and a <textares> :D


<!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

neofibril
06-15-2004, 02:11 PM
document.forms[0][0]...
document.forms[0][1]...


Hey now, that's a nifty shortcut-reference; thanks coothead!

coothead
06-15-2004, 05:11 PM
Hi there neofibril,

Yes, it's so logical isn't it :D

coothead

glenngv
06-16-2004, 11:31 AM
Hey now, that's a nifty shortcut-reference; thanks coothead!
You can even make it shorter even more.


function showImage(f) {
f[0].className="two";
f[1].className="four";

}
...
<input type="submit" onclick="showImage(this.form);return false" value="submit"/>

neofibril
06-16-2004, 04:04 PM
Good stuff!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum