Button type submit not working in IE6.0

Question

Hallo Friends,

I need a button with text on it in 2 lines. The length of the text is more than the space i have for it.:-) Image is not of my preference.

I have used the following code

    <tr>
        <td align="center">
             <button type="submit" name="add_invoice" id="buttonstyle">
                  Add to Ready for<br />
                  Invoicing
              </button>
        </td>  
     </tr>

   <tr>
    <td align="center" colspan="2">
         <input type="submit" name="delete" value="Delete">
     </td>
  </tr>

This is working pretty good in IE 7.0.

But in IE 6.0 eventhough i click the second button delete, in $_POST, it is returning the values of both the buttons. it has the value of [add_invoice] and [delete]. So i am not able to figure it out which one is clicked (in IE 6.0 Only).

Please help me to understand this behaviour. Let me know if you know any other alternative.

Thanks in advance!

Answer 1

The <button> element is buggy in IE. Try using an <input type="submit"> ?

EDIT: Since you need it to span 2 lines, I suggest styling the input submit or creating an image, unfortunately.

EDIT #2: You can also probably use <!--[if IE 6]> conditionals to feed an input type='image' to IE6 and button to other browsers if it really matters.

Answer 2

you've used one <button> tag and one <input type='submit'> tag. These two work differently; you probably want to use the same tag for both of them. (probably ).

The tag is generally used for forms which use Javascript actions rather than actually submitting the form.

[edit]

The need to have a multi-line submit button plus the need to support IE6 is a problematic combination. You may end up being forced to use an image (the horror!) (I'm in the fortunate position of not having to support IE6 any more, but I know others aren't so lucky)

Answer 3

I do not know if this would work or not, but you could probably use a javascript onClick event to trigger the submit.

<tr>
    <td align="center">
         <button type="submit" onClick="document.formname.submit();" name="add_invoice" id="buttonstyle">
              Add to Ready for<br />
              Invoicing
          </button>
    </td>  
 </tr>

Remember to replace formname with the actual formname if this is to work, which I do not know if it will, as I do not have IE6 setup, I cannot test it.

UPDATE

I am not sure if this would be worth it or not, but you can set it up like this (or in a function) to have the value be changed.

<tr>
    <td align="center">
         <button type="submit" onClick="document.formname.delete.value = ''; document.formname.submit();" name="add_invoice" id="buttonstyle">
              Add to Ready for<br />
              Invoicing
          </button>
    </td>

Which should set the delete value to be empty. It is hackish and not sure if I would do it this way, but it is a way to achieve it. I would probably store that in a function, however, and just call the function. For demonstration / testing reasons, I did not do that for this example.