<button> behavior in Firefox vs IE - html

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

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

Answer 2

Internet Explorer 6 and 7 both have buggy form handling support, especially with button elements:
The innerText of a button element is submitted, instead of the value (if set).
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 :(
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.

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

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 5

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 6

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 7

Personnally, I try to avoid any javascript for that kind of problem.
Thanks to the Label tag that triggers any form element with an ID attribute.
<label for="action_delete" class="button-submit"><input type="submit" id="action_delete" name="action" value="delete" /> Delete this item</label>
Then use CSS to style the label as a button
label.button-submit{ cursor: pointer; ... }
label.button-submit input{ position: absolute; top: -999%; }
Cheers!