Question

我有一个表，并且在每行的末尾有一个按钮，因此用户可以删除该行。我是这样做的：

<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>

但是这在IE中不起作用，表单发送删除而不是值。我也试过了：

<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>

但是按钮文本是一个数字而不是单词delete。

无论如何，我可以在表单中添加一堆提交按钮，所有表示删除但执行不同的操作？我不能使用单独的表格，因为表格不能嵌套。

Answer 1

与您的问题无关：总是在您的属性值周围加上双引号。

Answer 2

Internet Explorer 6和7都有错误的表单处理支持，尤其是button元素：

提交了innerText元素的button，而不是value（如果已设置）。
所有button个元素都成功，因此提交了所有名称/值对。这意味着如果＃1能够正常工作，它将删除所有项目：（
如果type上未设置button属性，则不会默认为submit。因此，您必须为每个type="submit"添加button。

克服这个问题的可能方法可能是：

1）使用包含form的隐藏字段创建多个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）在id中添加button，以便您可以在服务器端解析它：

<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）使用JavaScript提交value而不是innerText，只提交成功的button：

IE8.js

没有“最佳”答案，只取决于具体情况。

Answer 3

在这种情况下，我不会使用多个提交按钮。单击按钮时，最好将隐藏输入设置为所需的值（使用Javascript）。然后javascript可以调用myform.submit（）

Answer 4

一些JavaScript和隐藏的表单字段怎么样？

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

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

对于按钮：

<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>

在服务器端脚本中，您可以检查是否设置了deleteID并根据需要进行删除。

Answer 5

为什么不直接使用链接？

您也可以更改每个按钮的名称，但我相信链接更好，因为您实际上并未提交表单，而是执行操作。

Answer 6

如果可以，请使用链接

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

如果您坚持使用表格，请使用此

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

Answer 7

个人而言，我试图避免任何javascript出现这种问题。

感谢Label标签触发任何具有ID属性的表单元素。

<label for="action_delete" class="button-submit"><input type="submit" id="action_delete" name="action" value="delete" /> Delete this item</label>

然后使用CSS将标签设置为按钮

label.button-submit{ cursor: pointer; ... }
label.button-submit input{ position: absolute; top: -999%; }

干杯！

Firefox对IE中的<button>行为</button>

7 个答案: