Using a picture instead of the Submit button of a form

ConfusedOfLife · 08-03-2002, 05:43 PM

hi, I actually said the whole question in the title! When you have a form, in the end you make a button called submit, that by pressing that, form understands that it should execute for example the "onsubmit" event, or you can have a Reset button too. The problem is that I wana have my fancy image instead of any HTML button and by pressing the image, "Onclick" event gets excecuted AND the form's "onsubmit" even also gets excecuted!
Is there any way? It should be I think!

JohnKrutsch · 08-03-2002, 06:16 PM

Sure, try something like this:

<a href="javascript: document.formName.submit()"><img src="submitpic.gif"></a>

<a href="javascript: document.formName.reset()"><img src="resetpic.gif"></a>

boywonder · 08-03-2002, 06:17 PM

try this:
<input type="image" value="submit" src="---" width="---" height="---">

JohnKrutsch · 08-03-2002, 06:39 PM

Keep in mind that the input type of image is programmed to work like a sbmit button so it wont work for a reset button.

ConfusedOfLife · 08-04-2002, 10:24 AM

dear John, I tried what you said and it didn't work!
I wrote:

<body>
<form name="myForm" onsubmit="alert('hi!');">
<input type="Text" value="">
</form>
<a href="javascript: document.myForm.submit()"><img src="About_On.jpg"></a>

</body>

if it worked, when I clicked on my picture, the alert has to be activated, huh? I also put the <a href.....> tag IN the form, but it didn't work either.

But what dear boywonder said is perfectly working, and also you're right that his way doesn't work for the reset button, but I also need a reset button, what can I do?

Thanx in advance

Mr J · 08-04-2002, 12:49 PM

Try the following

<a href="#null" onclick="document.formname.reset()"><img src="image.gif"></a>

ConfusedOfLife · 08-05-2002, 09:30 PM

well, I just tried something myself out of my imagination and it worked, well, somehow it worked! if you write:

<script>
function tt()
{
alert('hello!');
}
</script>

<form name="ourName">
<input type="Text" value="">
</form>
<a href="javascript: document.ourName.submit(); document.ourName.onsubmit = tt();">
<img src="About_On.jpg">
</a>

then by clicking on the image, it'll show you "hello!", I mean what the tt() function is supposed to do, but then it'll give you an error saying that "it was not implemented"! I dunno what it means in here! anyway, I think the problem is solved, coz it actually submits the form, and you can find it out from the fact that for example all your input fields become empty, and it shows that the submit was activated ( if it's not the reset that's activated!) and I needed that onsubmit event handler to run a function for evaluating my form's elements that I can do the same by running a function when someone clicks on the image, coz, well, when someone clicks that, then it means that it's gonna be submitted, and after running my evaluating function, I can have "document.formName.submit()", anyway, thanx for your help but it was better if we could have the onsubmit event handler working too, as it works in the <input type="image"> method.

beetle · 08-05-2002, 09:51 PM

a MUCH better way to use an image input as a reset button is to do this:

Code:

<input type="image" src="reset.gif" onClick="this.form.reset(); return false;" />

This way you don't have to hardcode any DOM names or other nonsense like that...