<button> behavior in Firefox vs IE

Question

I have a table, and at the end of each row, there is a button so the user can delete that row. I'm doing it like this:

<td><button type=submit name=delete value=1>delete</button>
<td><button type=submit name=delete value=2>delete</button>
<td><button type=submit name=delete value=3>delete</button>
<td><button type=submit name=delete value=4>delete</button>

But this doesn't work in IE, the form sends delete instead of value. I've also tried:

<td><input type=submit name=delete value=1>
<td><input type=submit name=delete value=2>
<td><input type=submit name=delete value=3>
<td><input type=submit name=delete value=4>

But then the button text is a number instead of the word delete.

Is there anyway I can add a bunch of submit buttons to a form that all say delete but perform different actions? I can't use separate forms since forms can't nest.

Answer 1

Why not just use a link?

You can also change the name for each button, but the link is better, I believe, as you are not really submitting a form, but doing an action.

Answer 2

In this case I wouldn't go with multiple submit buttons. It'd be better to set a hidden input to the value you want (using Javascript) when the buttons are clicked. Then the javascript can call myform.submit()

Answer 3

How about some JavaScript and a hidden form field?

<input type="hidden" name="deleteID" value="" />

<script type="text/javascript">
function deleteID(theid)
{
    theFormName.deleteID = theid;
    theFormName.submit();
}
</script>

And for the buttons:

<td><input type="button" name="delete" value="Delete" onclick="javascript:deleteID(1);" /></td>
<td><input type="button" name="delete" value="Delete" onclick="javascript:deleteID(2);" /></td>
<td><input type="button" name="delete" value="Delete" onclick="javascript:deleteID(3);" /></td>
<td><input type="button" name="delete" value="Delete" onclick="javascript:deleteID(4);" /></td>

And in the server side script, you can check if deleteID is set and delete as necessary.

Answer 4

Use links if you can

 <td><a href='delete.php?id=1'>delete</a></td>

If you insist on using forms use this one

 <td>
   <form action='delete.php'>
      <input type='hidden' name='id' value='2'>
      <input type='button' value='delete'>
   </form>
 </td>

Answer 5

Unrelated to your question: always put double quotes around your attribute values.

Answer 6

Internet Explorer 6 and 7 both have buggy form handling support, especially with button elements:

1. The innerText of a button element is submitted, instead of the value (if set).
2. All button elements are successful, so all name/value pairs are submitted. This means if #1 would have worked correctly, it would delete all items :(
3. If the type attribute is not set on the button, it won't default to submit. So you have to add type="submit" to every button.

Possible ways to overcome this problem could be:

1) Create multiple forms with a hidden field containing the value:

<form action=".../delete" method="post">
    <input type="hidden" name="id" value="1" />
    <button type="submit">Delete</button>
</form>
<form action=".../delete" method="post">
    <input type="hidden" name="id" value="2" />
    <button type="submit">Delete</button>
</form>

2) Add the id inside the button, so you can parse it on the server side:

<button type="submit" value="1">Delete <span>1</span></button>

CSS:

button span {
    display: none;
}

C#:

int id;
if (!Int32.TryParse(this.Request.Form["delete"], out id)
{
    // Get the value between the `span`s
}

3) Use JavaScript to submit the value instead of the innerText and only successful buttons:

IE8.js

There is no 'best' answer, it just depends on the situation.