Replacing multiple buttons with images in the same form?

[PayBas]

Okay here's the deal, I'm trying to replace the "preview post" and "submit new thread" buttons in the "newthread" template with images, I need this for my skin.

So very basically this is what vBull looks like at default:

<form action="newthread.php?do=postthread&amp;f=$forumid" method="post" name="vbform"<if condition="!is_browser('webtv')"> onsubmit="return vB_Editor['$editorid'].prepare_submit(this.subject.value, $vboptions[postminchars])"</if>>

<lots of hidden inputs>

<input type="submit" class="button" name="sbutton" value="$vbphrase[submit_new_thread]" accesskey="s" tabindex="1" />
<input type="submit" class="button" name="preview" value="$vbphrase[preview_post]" accesskey="r" tabindex="1" />
</form>

and I want it to look something like this:

<form action="newthread.php?do=postthread&amp;f=$forumid" method="post" name="vbform"<if condition="!is_browser('webtv')"> onsubmit="return vB_Editor['$editorid'].prepare_submit(this.subject.value, $vboptions[postminchars])"</if>>

<lots of hidden inputs>

<input type="image" class="button" name="sbutton" src="images/post.gif" id="{$editorid}_save" value="$vbphrase[submit_new_thread]" accesskey="s" tabindex="1" />
<input type="image" class="button" name="preview" src="images/preview.gif" value="$vbphrase[preview_post]" accesskey="r" tabindex="1" />
</form>


However this does NOT work because Internet Explorer discards the "value" statement or something (it does work in FF). Basically you cannot have multiple image submit buttons cuz then it messes up :(.

I know this can be fixed by using javascript, but I cannot get it working.

Any help would be appreciated.

[Floris]

Because IE is like Deathstar, bad for all people.

http://groups.google.com/groups?th=e5f4dc91c1b1eda2&rnum=1

There is a technicality related to form submission if you use an image submit button. It is usually relevant only if you have several such buttons in one form. That's perfectly valid per se, but the usual instructions for including several submit buttons do not apply as such. When using image submit buttons, you need to use specifically different NAME attributes in order to be able to recognize in the form handler which button was clicked on.

The reason to this is the way in which image submit buttons contribute to form data set: the value of the VALUE attribute is ignored, and the coordinates of the clicked location are passed instead. For example, if you have <input type="image" src="submit.gif" name="foo" value="bar">, then the form data set contains the fields foo.x and foo.y, with numeric values that indicate the x and y coordinates of the clicked location.

http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html

[PayBas]

Yeah I read those sources even before I posted this topic :). But this line puzzels me:

In addition to the usual limitations imposed by using client-side scripting, these techniques have some specific problems. In particular, the ONSUBMIT event handler for the form is not invoked; this however is not very serious, since you can put the code (e.g. for form data checking) into the ONSUBMIT attribute value before calling submit(). The JavaScript Form FAQ contains answers to questions related to these issues.

Does that mean that I cannot use the described javascript method in my case by default?


My javascript skills kinda suck so I ended up with stuff like this:
<input type="image" class="button" name="preview" src="/images/en_US/preview.gif" onclick="javascript: document.vbform.submit.value('$vbphrase[preview_post]');return false;" accesskey="r" tabindex="1" />
which didnt get me anywhere.

You see the problem for me is that the "preview' button doesnt get registered correctly (or at all). Doesn't matter if I press "post" or "preview".... it gives the same result... the message gets posted.