PHP Form Submission: Recognize Image Input Buttons

By  on  

As you probably know, you can recognize a form submission from a "submit" input type by placing the following code in the "processing" PHP script:

if(isset($_POST['submit'])) { /* do stuff */ }

Did you know, however, that when using an "image" input type to submit the form, the above wont work? You need to add a "_x" to the field name in PHP:

if(isset($_POST['submit_x'])) { /* do stuff */ }

Odd, huh? This works the same when using a form "GET" method.

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • By
    Create Twitter-Style Buttons with the Dojo Toolkit

    I love that JavaScript toolkits make enhancing web pages incredibly easy. Today I'll cover an effect that I've already coded with MooTools: creating a Twitter-style animated "Sign In" button. Check out this five minute tutorial so you can take your static...

  • By
    Printing MooTools Accordion Items

    Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the...

Discussion

  1. The _x and _y represent the coordinate location you clicked the image at.

  2. Think this is only an issue with IE.

  3. Yeah. The _x- and _y-coordinates are great for improving the security of a form! I’ve used this to determine if the form has been filled by a human. A spam-bot won’t submit any coordinates but a human has to click on the button and so there will always be coordinates (you’ll have to deactive submitting with the ENTER-button).

  4. @Matthias: Good point on the security enhancement — I’ve never though of that!

  5. Braxo

    @ Matthias

    Thanks for posting your comment. I think telling the user that the ENTER button has been deactivated for bot protection is easier than having the user type in a captcha.

    I’ll definitely be looking into that method and most likely incorporating it into my projects.

  6. @Braxo – Wait – “Enter button” is deactivated? How would this affect someone who cannot use a mouse/relies on accessibility tools to fill out forms and the like?

    Some sites cannot get away with it (coughtargetcough).

  7. You can save yourself the trouble and just give the input a name attribute and check for that. Saves from changing code in two places (the input and the PHP submit validation).

    <input type="image" src="image.png" name="submitted" value="Submit" />

  8. I should clarify that…

    It saves from changing code in 2 places should you want to change to/from an image submit or a standard submit.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!