Question

I have a problem in creating a Button with text and image on it.

<td> 

<button type="submit" name="report" value="Report"  
<?php 
 if($tab == 'Excel') 
   echo "id=\"tab_inactive\""; 
 else 
   echo "id=\"tab_active\"" ; ?>>
 <img src="images/report.gif" alt="Report"/>Report
</button>

<button type="submit" name="excel" value="Excel"  
<?php 
 if($tab == 'Excel' )
     echo "id=\"tab_active\""; 
 else 
     echo "id=\"tab_inactive\"" ; ?>>
<img src="images/Excel.gif" alt="Excel" width="16" height="16" /> Excel
</button>

</td>

Here $tab is

$tab = strlen(trim($_POST[excel]))>0 ? $_POST[excel] : $_POST[report];

I tried this way, but this is behaving so strangely.
On click the button:- The submit function is working properly in firefox, but not in IE.

Instead of submitting the value(in this example values are ‘Report’ and ‘Excel’), indeed it is submitting the label of the button.

That is if i am checking the value of array PRINT_R($_POST). The value of it is

Array ( [report] =>(Icon that i used) Report 
        [excel] => (Icon that i used) Excel 
        [frm_analysis] => [to_analysis] => ) 

Here i have more than 1 button, then all the labels are submitted eventhough one of them is pressed. i dont how to capture which button is pressed.

I even tried changing button type=button and onclick="document.formname.submit()" Even this is resulting in the same.

Can you please help me to solve this.

Answer 1

<button>s are broken in IE. I think they corrected it in IE7 or 8. Is the page in standards mode? That may help in IE7 or 8.

If you need to support the broken version, you could try and work around it with JS, if you don’t mind being dependent on it. Example:

<script type="text/javascript">
  function buttonclicked(button) {
    button.form.elements["buttonclicked"].value = this.value;
  }
</script>

<input type="hidden" name="buttonclicked" value="">
<button type="submit" name="report" onclick="buttonclicked(this)">
 <img src="images/report.gif" alt="Report"/>Report
</button>
<button type="submit" name="excel" onclick="buttonclicked(this)">
<img src="images/Excel.gif" alt="Excel" width="16" height="16" /> Excel
</button>

I don’t think there is any other way other than avoiding <button> and using <input type=submit> if you need to distinguish between which on was clicked.