[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2016-10-07
11
Medium Priority
?
76 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
[X]
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
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 111

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 100 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 59

Accepted Solution

by:
Julian Hansen earned 1600 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 111

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 59

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 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 300 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 111

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 59

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 111

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
The viewer will learn how to count occurrences of each item in an array.
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.
Suggested Courses

656 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