HTML 表单上的多个提交按钮 - 指定一个按钮作为默认按钮 [英] Multiple submit buttons on HTML form – designate one button as default

查看:71
本文介绍了HTML 表单上的多个提交按钮 - 指定一个按钮作为默认按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个包含三个提交按钮的表单,如下所示:

I have a form that has three submit buttons as follows:

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

按钮行混合了提交、重置和 JavaScript 按钮.按钮的顺序可能会发生变化,但在任何情况下,保存按钮都保留在上一个按钮和下一个按钮之间.

The row of buttons is a mix of submit, reset and JavaScript buttons. The order of buttons is subject to change, but in any case the save button remains between prev and next buttons.

这里的问题是当用户点击Enter提交表单时,post变量COMMAND"包含Prev";正常,因为这是表单上的第一个提交按钮.但是,我希望在用户通过 Enter 按钮提交表单时触发下一步"按钮.这有点像将其设置为默认提交按钮,即使在它之前还有其他按钮.

The problem here is that when a user hits Enter to submit the form, the post variable "COMMAND" contains "Prev"; normal, as this is the first submit button on the form. I however want the "Next" button to be triggered when the user submits the form via the Enter button. It is kind of like setting it as the default submit button, even though there are other buttons before it.

推荐答案

我的建议是不要反对这种行为.您可以使用浮动有效地改变顺序.例如:

My suggestion is don't fight this behaviour. You can effectively alter the order using floats. For example:

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

与:

#buttons { overflow: hidden; }
#buttons input { float: right; }

将有效地颠倒顺序,因此下一步"按钮将是按回车键触发的值.

will effectively reverse the order and thus the "Next" button will be the value triggered by hitting enter.

这种技术将涵盖很多情况,而不必求助于更hacky的JavaScript方法.

This kind of technique will cover many circumstances without having to resort to more hacky JavaScript methods.

这篇关于HTML 表单上的多个提交按钮 - 指定一个按钮作为默认按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆