• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 92
  • Last Modified:

Problem with input type = image and checking if it is isset

Hi folks,

     I have several forms in which I  changed  the input type from:

 <td><input type="submit" name="submit" value="Submit"  alt="Continue" /></td>

Open in new window


TO:
    <td><input type="image" name="submit" src="Themes/blue/Continue.jpg" alt="Continue" /></td>
    <td><input type="image" name="cancel" src="Themes/blue/Cancel.jpg" alt="Cancel" /></td>

Open in new window


And I changed the  way I check for what was submitted FROM (which worked very well):

 if (isset($_POST['cancel']))
        {
		coding remove for EE posting
       }
    if (isset($_POST['submit']))
        {
		coding remove for EE posting
       }

Open in new window


TO THIS:

if (isset($_POST['cancel_x']))
              {
		coding remove for EE posting
       }
    if (isset($_POST['submit_x']))
        {
		coding remove for EE posting
       }
 

Open in new window



The submit works very well, does what it is suppose to do. But it blows right by the check for the cancel image.
The submit x and y has values, but the cancel x and y displays nothing.
My form method is set to post.
I understand that an image has x and y coordinates and I would think that if I click on the cancel image, it would return
coordinates but it does not - only if I click on the continue image.
I thought perhaps that are align on the same row but if I remember my geometry correctly, they would still have different x-coordinates.
What is wrong??
thank you....
0
Overthere
Asked:
Overthere
  • 5
  • 3
  • 2
  • +1
3 Solutions
 
Ray PaseurCommented:
This may seem like a rhetorical question, but why do you care about the X/Y coordinates of the submit control?  If you don't care, why not just check for what is being submitted?

You can see what is being submitted by using var_dump($_POST) to check the request variables.  If you want to post that information here we may be able to recommend a good way forward.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Ray is correct about using var_dump to see what is in the $_POST array.

This works find for me in Firefox and Chrome. What browser are you using? Is it possible there's a problem with the part you've removed for EE posting?
0
 
OverthereAuthor Commented:
Found the solution:
 
I changed the coding to this:

    <td><input type="image" name="submit" value="submit" image src="Themes/blue/Continue.jpg" alt="Continue" /></td>
     <td></td>
     <td><input type="image" name="cancel" value="cancel" image src="Themes/blue/Cancel.jpg" alt="Cancel" /></td>

Open in new window


I added the "value=" to the coding.
And now if I check for submit_x or cancel_x, it gives me values when dumping $_POST, plus it displays the image and more importantly - each image works as it should.

Two reasons for caring about x and y - (mainly x) after I changed the original coding:

1. the original code for the input type=submit  would not display the image , no way - no how. That is why I changed the input type to image.

2. And that changed what I checked for - did a search and found several references using  the x coordinates (including one in EE)

take a peek at  http://solutionz.yolasite.com/php/how-submit-a-form-using-input-type-image-with-php-isset

Because I needed to display an image instead of the input type=submit displays, and because of relying on isset,
is why I changed the coding to begin with - hence the checking x coordinates
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Julian HansenCommented:
Why not use <button>
<button type="submit" name="mybutton" value="awesome"><img src="Themes/blue/Cancel.jpg" alt="Cancel" /></button>

Open in new window

0
 
Ray PaseurCommented:
@Julian: I was wondering that, too.  Or maybe just style the input control with CSS, so you can keep semantic values and visual appearance separated.  The question and "solution" seems to evince a misunderstanding of how we use these HTML controls.  The X/Y coordinates might make sense for a clickable map, where the location of the mouse-click needs to be transmitted to the action script.  But if the objectives are (1) make it look good and (2) detect which button was clicked, there are more appropriate ways to get a useful result!
0
 
Julian HansenCommented:
<input type="image" name="cancel"...>
Sends back two values cancel_x and cancel_y - so checking for the presence of either of those to determine if the button is clicked would make sense independently of any interest in the actual co-ordinates - it is the only way of checking if a button was clicked.
Consider
<?php
if ($_POST) {
  echo "<pre>" . print_r($_POST, true) . "</pre>";
}
<form method="post">
   <input type="image" name="submit" src="..." />
</form>

Open in new window

Output
Array
(
    [submit_x] => 81
    [submit_y] => 95
)

Open in new window

So I can understand what the asker is trying to do - but personally I would go with a <button>
0
 
Ray PaseurCommented:
I think valid markup, irrespective of the choice of submit, button, or image, should present a request with the element name and value.  You don't have to depend on the name_x or name_y unless it is needed in some other context.  Here's a little thought experiment showing some ways of looking at the issue.  Try clicking on the Continue and Cancel buttons to see what happens.  This seems to make sense in the desktop browsers; I did not test other devices.
https://iconoun.com/demo/temp_overthere.php
<?php // demo/temp_overthere.php
/**
* https://www.experts-exchange.com/questions/28975156/Problem-with-input-type-image-and-checking-if-it-is-isset.html
*
* http://www.w3schools.com/TAGS/att_input_type.asp
*/
error_reporting(E_ALL);


if (!empty($_POST['thing']))
{
    // SHOW WHAT WAS CLICKED
    var_dump($_POST['thing']);
}


// CREATE THE FORM USING HEREDOC NOTATION
$form = <<<EOF
<style type="text/css">
.cont {
    width:300px;
    height:60px;
    color:transparent;
    background:url('images/continue.png');
}
.can {
    width:300px;
    height:60px;
    color:transparent;
    background:url('images/cancel.png');
}
button {
    border:0; margin:0; padding:0;
}
</style>

<form method="post">

IMAGES<br>
<input type="image" name="thing" value="continue" src="images/continue.png" />
<input type="image" name="thing" value="cancel"   src="images/cancel.png"  />
<br><br>

SUBMIT<br>
<input type="submit" name="thing" value="continue" class="cont" />
<input type="submit" name="thing" value="cancel"   class="can" />
<br><br>

BUTTON<br>
<button type="submit" name="thing" value="continue"><img src="images/continue.png" alt="Continue" /></button>
<button type="submit" name="thing" value="cancel">  <img src="images/cancel.png"   alt="Cancel"  /></button>
<br><br>

</form>
EOF;

echo $form;

Open in new window

0
 
Ray PaseurCommented:
Or nevermind - I'm wrong about the image.  It does need the _x or _y for Internet Explorer (thanks again MSFT).  Chrome gets it "right."

Agree - the button seems to work very well, as does styling the submit.
0
 
Julian HansenCommented:
Safari and Chrome include the base name for <input type="image" /> FF and IE do not.
1
 
OverthereAuthor Commented:
Thank you all for responding! I am giving Julian the majority of the points but giving points to ray and Kim for assisting. If this is not acceptable, please let me know.
0
 
Ray PaseurCommented:
After fiddling around with the input controls a little bit I found this.  It seems to work correctly across browsers.  Note the name attribute changes.
<?php // demo/temp_overthere.php
/**
* https://www.experts-exchange.com/questions/28975156/Problem-with-input-type-image-and-checking-if-it-is-isset.html
*
* http://www.w3schools.com/TAGS/att_input_type.asp
*/
error_reporting(E_ALL);


// IF THERE IS A REQUEST
if (!empty($_POST))
{
    // SANITIZE THE REQUEST
    $safe_post = [];
    foreach ($_POST as $key => $value)
    {
        $key = preg_replace('/_x|y$/i', NULL, $key);
        $safe_post[$key] = $value;
    }

    // IS IT CONTINUE OR CANCEL?
    if (array_key_exists('continue', $safe_post)) echo PHP_EOL . "Continue";
    if (array_key_exists('cancel',   $safe_post)) echo PHP_EOL . "Cancel";
}


// CREATE THE FORM USING HEREDOC NOTATION
$form = <<<EOF
<style type="text/css">
.cont {
    width:300px;
    height:60px;
    color:transparent;
    background:url('images/continue.png');
}
.can {
    width:300px;
    height:60px;
    color:transparent;
    background:url('images/cancel.png');
}
button {
    border:0; margin:0; padding:0;
}
</style>

<form method="post">

IMAGES<br>
<input type="image" name="continue" value="continue" src="images/continue.png" />
<input type="image" name="cancel"   value="cancel"   src="images/cancel.png"  />
<br><br>

SUBMIT<br>
<input type="submit" name="continue" value="continue" class="cont" />
<input type="submit" name="cancel"   value="cancel"   class="can" />
<br><br>

BUTTON<br>
<button type="submit" name="continue" value="continue"><img src="images/continue.png" alt="Continue" /></button>
<button type="submit" name="cancel"   value="cancel">  <img src="images/cancel.png"   alt="Cancel"  /></button>
<br><br>

</form>
EOF;

echo $form;

Open in new window

0

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

  • 5
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now