如何在表单中创建两个按钮并且只有一个提交表单

Question

我正在尝试在我的表单中创建一个“下一步”按钮和一个“返回”按钮。我希望“下一步”按钮验证并提交表单。我希望“返回”按钮简单地返回“购物车”页面。但是“返回”按钮不断验证并尝试提交表单。 这是我的代码：

<div class="buttons">
    <a href="@Url.Action("Index", "Cart")"><button class = "button" id = "back">Back</button></a>
    <input type="submit" value="Next" class="button" />
</div>

我需要将返回链接作为按钮的原因是它看起来与“下一步”按钮相同。有什么想法可以让我正常工作吗？

Answer 1

<button> 元素始终提交表单。 <input type="submit" /> 元素也是如此。

但是<input type="button" /> 不会提交表单。这就是你想要的。

<div class="buttons">
    <input type="button" class="button" id="back" onclick="window.location = '@Url.Action("Index", "Cart")';">Back</a>
    <input type="submit" value="Next" class="button" />
</div>

编辑我不确定你是否可以将它放在<a> 元素中。我修改了我的示例以使用点击事件而不是链接。如果放入 <a> 元素内是有效的（有人可以确认吗？），您也可以这样做。