Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 839
Phillip Senn Avatar asked Sep 29 '09 02:09

Phillip Senn


People also ask

Can you use an image as a submit button?

Definition and UsageThe <input type="image"> defines an image as a submit button. The path to the image is specified in the src attribute.

Is submit an input type?

Definition and Usage. The <input type="submit"> defines a submit button which submits all form values to a form-handler. The form-handler is typically a server page with a script for processing the input data. The form-handler is specified in the form's action attribute.

What is the difference between input type submit and button type submit?

Both <button type="submit"> and <input type="submit"> display as buttons and cause the form data to be submitted to the server. The difference is that <button> can have content, whereas <input> cannot (it is a null element).

Is there an input type image?

<input type="image"> <input> elements of type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.


2 Answers

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>
like image 111
Peter Boughton Avatar answered Nov 12 '22 02:11

Peter Boughton


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.

like image 44
Dan Short Avatar answered Nov 12 '22 04:11

Dan Short