Solved

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

Posted on 2016-10-07
11
28 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 108

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 21

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
 
LVL 51

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 108

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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 51

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 108

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 108

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 51

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 108

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Generating table dynamically is the most common issue faced by php developers.... So it seems there is a need of an article that explains the basic concept of generating tables dynamically. It just requires a basic knowledge of html and little maths…
I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

743 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now