Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2016-10-07
11
47 Views
Last Modified: 2016-10-08
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
Comment
Question by:Overthere
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 41834544
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
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 25 total points
ID: 41834590
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
 

Author Comment

by:Overthere
ID: 41834675
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 55

Accepted Solution

by:
Julian Hansen earned 400 total points
ID: 41834737
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
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 41834918
@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
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41834946
<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
 
LVL 109

Assisted Solution

by:Ray Paseur
Ray Paseur earned 75 total points
ID: 41834955
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
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 41834957
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
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41834993
Safari and Chrome include the base name for <input type="image" /> FF and IE do not.
1
 

Author Comment

by:Overthere
ID: 41835179
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
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 41835196
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Email called spam 5 36
MVC - procedural PHP 10 35
selector:validator cookies 4 30
Ahax pagination 9 32
Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question