ansaurus

Question

Answer 1

+8 A:

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>

Peter Boughton 2009-09-29 02:17:37

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

cf_PhillipSenn 2009-09-29 02:36:15

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.

Ben Doom 2009-09-29 03:26:24

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 2009-09-29 03:29:41

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

Peter Boughton 2009-09-29 03:34:39

Thanks for letting me know, Peter.

Ben Doom 2009-09-29 13:30:16

Answer 2

+2 A:

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.

Daniel Short 2009-09-29 12:11:31

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.

Al Everett 2009-09-29 18:11:55

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

cf_PhillipSenn 2009-09-29 19:49:33

Yes, some JavaScript would be required.

Al Everett 2009-10-01 18:33:24

Answer 3

+1 A:

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.

Bryan Kaiser 2009-09-30 20:28:49

I like this! contains, eh?

cf_PhillipSenn 2009-10-02 20:10:38

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.

Bryan Kaiser 2009-10-06 23:16:08

ansaurus

tags:

views:

answers:

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

related questions