input type image value display problem on the next page

Viewed 46

(first page)

    <form action="page1.php" method="post"> 
     <input type="image" src="images/leavecredits.png" name="btnImage" id="btnImage" value="uuuu"/>

<input type="hidden" id="hiddenEmpID" name="hiddenEmpID" value="yyyy"/>

  <input type="image" src="images/leavecards.png" alt="Submit" width="100" height="100" style="background-color:#FFF; border:dotted #CCCCCC thin;"  onMouseOver="this.src='images/leavecards_onmouseover.png'" onMouseOut="this.src='images/leavecards.png'"  
  id="btnLeaveManagement2" name="btnLeaveManagement2" value="leavecards">   

</form>

(page1.php)

<?PHP
echo "<br>hiddenEmpID: " . $_POST['hiddenEmpID'];
echo "<br>btnImage: " . $_POST['btnImage'];
?>

result:

hiddenEmpID: yyyy

Notice: Undefined index: btnImage .... in line....

btnImage:

value of the type image input does not appear on the next page browser: chrome and mozilla

what do you think is wrong guys?


(possible solution if value really does not work) Hi guys, since i really want to try using type="image" as a button i came up with this dirty code on php

<form action="page1.php" method="post">
<input type="image" src="images/leavecredits.png" alt="Submit" id="btnLeaveManagement" name="btnLeaveManagement"  width="100" height="100" style="background-color:#FFF; border:dotted #CCCCCC thin;"  onMouseOver="this.src='images/leavecredits_onmouseover.png'" onMouseOut="this.src='images/leavecredits.png'" >
<input type="hidden" id="hiddenEmpID" name="hiddenEmpID" value="leavecards"/>
</form>

<form action="page1.php" method="post">
<input type="image" src="images/leavecredits.png" alt="Submit" id="btnLeaveManagement" name="btnLeaveManagement"  width="100" height="100" style="background-color:#FFF; border:dotted #CCCCCC thin;"  onMouseOver="this.src='images/leavecredits_onmouseover.png'" onMouseOut="this.src='images/leavecredits.png'" >
<input type="hidden" id="hiddenEmpID" name="hiddenEmpID" value="leavecredits"/>
</form>

    echo "<br>hiddenEmpID: " . $_POST['hiddenEmpID'];

now it will depend on hidden input's value

2 Answers

The HTML spec for an image input says that it does not pass along a value. Instead it may pass along the x and y coordinates of where you clicked on the image. Read more here...

Regardless if you want to use an image as a regular submit button, wrap an image inside of a form button with type submit.

<button type="submit" ... ><img src="image.jpg" .../></button>

An input type="image" only defines that image as the submit button and not as an input that can carry over a value to the server.

Using the type="image" is problematic because the ability to pass a value is disabled for some stupid lack of reason. Anyways & although it's not as customizable & thus as pretty, you can still use your images so long as they are part of a type="button".

Please use hidden field or input type button instead of input type image.

Related