Solved

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

Posted on 2016-10-07
11
52 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 110

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
Technology Partners: 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!

 
LVL 56

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 110

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 56

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 110

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 110

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 56

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 110

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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.

726 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