Question

I have quite a big form with multiple (over 100) submit buttons in it. Im using the following code now:

<input type='image' src='../images/add.png' name='FormDuplicate' value='" . $resInvoices['iProjectID']. "'>

If I click this image, it perfectly works.. in Chrome but not IE (7 and 8). When clicked upon in IE, the name isn’t even passed (FormDuplicate).

As I did a quick Google, I’ve found that IE won’t pass the value of a submit image. This leaves me to using multiple forms, but for a technical reason, I am not able to. So, what are my options?

Thanks.

Update regarding the comment

Here is the full <tr>:

<tr class='invoice-tr-standard' id='row2' onClick="FormTRClick(event, '2')"><td><input type='checkbox' name='strFormFactuur[]' value='19512' id='chk2'>&nbsp;<img src='../images/link.png' border='0'></td>

  <td><a href='project_details.php?projectID=19512' target='_blank'>Project</a></td>

  <td>Jobinfo</td>

  <td>Customer</td>

  <td><input type='text' name='FormTextStrPOnummer' value='324'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>

  <td>€ <input type='text' name='FormTextFltBedrag'  value='999.000'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>

  <td><img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'> <input type='image' src='../images/toevoegen.png' border='0' style='float: right; cursor: pointer;' name='FormDupliceer' value='19512'></td>

</tr>

And here is the final <td> element of the current tr row:

<td><img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'> <input type='image' src='../images/toevoegen.png' border='0' style='float: right; cursor: pointer;' name='FormDupliceer' value='19512'></td>

The code is unmodified and this appears as the HTML code.

Answer 1

IE will pass the coordinates only, so look for FormDuplicate.x and FormDuplicate.y in the Request collection and if exist, it means the FormDuplicate image was clicked.

Something like:

if(isset($_POST['FormDuplicate.x'])) {
    //submitted by FormDuplicate
}

From what I’ve seen, other browsers also send this (in addition to sending the value) so it should work cross browser.

Edit: to preserve and pass the value of the clicked image, add this JavaScript code to the page:

window.onload = function() {
    var arrInputs = document.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "image") {
            oInput.onclick = function() {
                var oHidden = document.createElement("input");
                oHidden.type = "hidden";
                oHidden.name =this.name;
                oHidden.value = this.value;
                this.form.appendChild(oHidden);
                this.value = "";
            };
        }
    }
};

This code dynamically attach click event handler for all inputs of type image, in which it will create hidden input on the fly, assign its name to the name of the image input and its value to the image input value, then append the hidden input to the parent form of the image, resulting in the value passed properly.
To avoid duplicate values in browsers like FF or Chrome, the code clears the image input value after appending the hidden element.