input type="image" vs type="submit"

html coldfusion

12,072

Solution 1

You could also just check the list of form fields to see if it contains the string "Update." Something like:

<cfif StructKeyExists(form,"fieldnames") and form.fieldnames contains "Update">
<!--- Do Update --->
<cfelseif StructKeyExists(form,"fieldnames") and form.fieldnames contains "Delete">
<!--- Do Delete --->
</cfif>

Form.fieldnames contains all the names of the form fields that were submitted.

Solution 2

To get your original Form.Update and Form.Delete whilst having an image on the button, try this:

<form action="somewhere" method="post">
    <button type="submit" name="Update"><img src="update.btn.png" alt="Update"/></button>
    <button type="submit" name="Delete"><img src="delete.btn.png" alt="Delete"/></button>
</form>

You'll then need CSS to remove the default button styling so you only get the image, something like:

form button
{
    margin       : 0;
    padding      : 0;
    border-width : 0;
    background   : none;
    cursor       : pointer;
}

And make sure you've got all this with a valid DOCTYPE at the very start of your content to prevent quirks mode - I generally throw in a reset to make sure it's the first thing:

<cfcontent reset/><!DOCTYPE html>

Solution 3

Another option is to name the image button something else, and simply add a hidden field with named Update to check for it's value. I realize that may not work in some specialized situations where you need to check for a specific button being clicked, but it's a quick fix without needing to do anything fancy to your image submits.

12,072

Author by

Phillip Senn

Developer in: Microsoft SQL Server, Adobe ColdFusion (and Lucee), HTML, CSS, JavaScript (with jQuery's help). Tools: Dreamweaver, Fireworks, Beyond Compare. Adjunct Instructor: Lenoir-Rhyne University. Twitter: @PhillipSenn

Updated on July 30, 2022

Comments

Phillip Senn over 1 year

I programmed for a long time checking for StructKeyExists(form,"Update") until I change my input from type="submit" to type="image". IE doesn't send the name of the control back when type="image", but instead sends Update.X and Update.Y.

<form method="post">
Old Way:<br />
<input type="submit" value="3" name="Update" /><br />
<input type="submit" value="4" name="Delete" />
<p>New Way:</p>
<input type="image" value="1" name="Update" src="http://www.google.com/intl/en_ALL/images/logo.gif" /><br />
<input type="image" value="2" name="Delete" src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</form>

My first thought was that I should just add two characters to my logic

from: <cfif StructKeyExists(form,"Update")
to:   <cfif StructKeyExists(form,"Update.X")

But I would like a solution that handles both type="submit" and type="image". Right now my logic is:

<cfif StructKeyExists(form,"Update") OR StructKeyExists(form,"Update.X")>
   <!--- UPDATE table --->
<cfelseif StructKeyExists(form,"Delete") OR StructKeyExists(form,"Delete.Y")>
   <!--- DELETE FROM Table --->
</cfif>

Q: Is there a more elegant way to check for which button has been pressed? Assuming there is more than one button on the form of course, because if I only had to check to see if the form was submitted, I would check to see if form.fieldnames existed.

Phillip Senn over 14 years

This is a great start, although IE doesn't use the cursor pointer when hovering over the image, and including cursor:pointer in button:hover doesn't seem to work either. Plus, in IE, the image is being centered on the amount of text that is required to point to the image. hmmmm....
Ben Doom over 14 years

IIRC, you can use the CSS cursor:hand;cursor:pointer to specify the ... um ... hand/pointer cursor. It tests out OK in FF3, and should work in IE. I don't know offhand about Safari or other browsers.
Peter Boughton over 14 years

Just do cursor:pointer for button - since the cursor only displays on :hover it doesn't make a difference. (Not sure about IE8, but for earlier versions :hover only works on A tags.) Not sure what you mean about centering on text? Make sure you've got a valid DOCTYPE if you want any chance of having correct behaviour (especially in IE).
Peter Boughton over 14 years

Ben, cursor:pointer is the W3C way and works in all modern browsers, plus IE6 and above.
Ben Doom over 14 years

Thanks for letting me know, Peter.
ale over 14 years

This is generally what I've done in the past. One can also use a hidden form element and update its value when a specific image button is clicked.
Phillip Senn over 14 years

Would your solution to "update its value when a specific image button is clicked" require some JavaScript?
ale over 14 years

Yes, some JavaScript would be required.
Bryan Kaiser over 14 years

Contains can be really useful. Since form.fieldnames is just a comma-delimited string, you can use string and list searches to find those values. Instead of contains you could also use find(), findnocase() or listValueCount() to do the same thing.