PDA

Click to See Complete Forum and Search --> : custom form button

Kommi
03-23-2003, 06:02 PM
now if I have a imple html form, in orde for it to get submitted I need to have a submit button
<input type = "submit">

I was wondering if there is a way to have a custom image as the button and to have the form be submitted whn the user clicks on the image. How can this be achieved (with or without Javascript)
pyro
03-23-2003, 06:07 PM
Try this:

<button type="submit" name="submit" value="Submit"><img src="submitimg.gif"/>Submit</button>
Kommi
03-23-2003, 06:24 PM
If you go here
http://matrix.csis.pace.edu/~s03-cs389-s07/index.html
and click on the login you can see that the button has the graphic on top but still has the grey area behind it. How can I get rid of that? Also I do wish to have the imag be a roll over with Javascript, so how can I have the form get submitted within a javascript function
pyro
03-23-2003, 06:29 PM
I think you are going to have to run a function, then. Try something like this:

<head>
function submitform()
{
document.formname.submit();
}
</head>
<body>
<a href="enablejavascript.htm" onclick="submitform(); return false;"><img src="your.gif"/></a>
dabush
03-23-2003, 06:32 PM
the actual way to do this would be as follows.

<input type=img src=submitimage.gif>
pyro
03-23-2003, 06:33 PM
Will that allow for rollovers?
dabush
03-23-2003, 06:52 PM
hmm. good point. i guess it would work

<input type=image src=submitimage.gif onMouseOver="whatever();">

But if it doesn't, you could always put span tags around it

<span onMouseOver="whatever();"><input type=image src=submitimage.gif></span>
dabush
03-23-2003, 06:54 PM
o and oops, i messed up on my frist post in this thread. its NOT <input type=img>

it IS
<input type=image>
Kommi
03-23-2003, 07:04 PM
<html>

<head>

<title>Welcome to Adobe GoLive 6</title>
<SCRIPT language="JavaScript">
<!--hide
function submitForm()
{
document.login.submit();
}
//-->
</SCRIPT>

</head>
<form action="http://matrix.csis.pace.edu:16143/pace/servlet/loginForm" method="post" name="login">

<body bgcolor="#ffffff">
<p>This is the log in page</p>
<p>Please enter your username and password:</p>
<p>username <input type="text" name="username" size="24" border="0"></p>
<p>password <input type="text" name="password" size="24" border="0"></p>
<img src = "submitoff.jpg" name="button" onClick = "javascript:submitFrom()"></a>




</body>
</form>
</html>

error: Line 25 (theone with the javascript:submitForm())
char 1
Error: Object Expected

Any idea how to fix this?
pyro
03-23-2003, 07:10 PM
Typo on submitForm(). You have submitFrom().
Kommi
03-23-2003, 07:15 PM
Thank you, I am an idiot. Thanx for the help and the quick response time
dabush
03-23-2003, 07:15 PM
Change it to this:


<html>
<head>
<title>Welcome to Adobe GoLive 6</title>
</head>
<form action="http://matrix.csis.pace.edu:16143/pace/servlet/loginForm" method="post" name="login">

<body bgcolor="#ffffff">
<p>This is the log in page</p>
<p>Please enter your username and password:</p>
<p>username <input type="text" name="username" size="24" border="0"></p>
<p>password <input type="text" name="password" size="24" border="0"></p>
<input type=image src=imageoff.jpg>
</form>
</body>
</html>
juststranded
11-15-2008, 01:28 PM
The way I do it is, instead of an IMG, I use a DIV and give it an ID with a background-image in CSS. Then I give the ID:hover a different background-image and a cursor:pointer; . You just put the onClick submit() function on the DIV instead of the IMG.

(Another advantage, in my opinion, to background-images is that the user can't accidentally, or on purpose, drag it around. I just find that annoying.)