javascript - 如何确定HTML表单上的默认提交按钮？(How is the default submit button on an HTML form determined?)

Question

Welcome To Ask or Share your Answers For Others

javascript - 如何确定HTML表单上的默认提交按钮？(How is the default submit button on an HTML form determined?)

asked Feb 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - 如何确定HTML表单上的默认提交按钮？(How is the default submit button on an HTML form determined?)

If a form is submitted but not by any specific button, such as

(如果表单已提交但未通过任何特定按钮提交，例如)

by pressing Enter
(按Enter键)
using HTMLFormElement.submit() in JS
(在JS中使用HTMLFormElement.submit())

how is a browser supposed to determine which of multiple submit buttons, if any, to use as the one pressed?

(浏览器应该如何确定多个提交按钮中的哪一个（如果有的话）用作按下的按钮？)

This is significant on two levels:

(这在两个层面上很重要：)

calling an onclick event handler attached to a submit button
(调用附加到提交按钮的onclick事件处理程序)
the data sent back to the web server
(数据发送回Web服务器)

My experiments so far have shown that:

(到目前为止，我的实验表明：)

when pressing Enter , Firefox, Opera and Safari use the first submit button in the form
(当按Enter键时 ，Firefox，Opera和Safari使用表单中的第一个提交按钮)
when pressing Enter , IE uses either the first submit button or none at all depending on conditions I haven't been able to figure out
(当按Enter键时 ，IE使用第一个提交按钮或根本不使用，这取决于我无法弄清楚的条件)
all these browsers use none at all for a JS submit
(所有这些浏览器根本不使用JS提交)

What does the standard say?

(标准说什么？)

If it would help, here's my test code (the PHP is relevant only to my method of testing, not to my question itself)

(如果它会有帮助，这是我的测试代码（PHP仅与我的测试方法相关，而不是我的问题本身）)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>

<h1>Get</h1>
<dl>
<?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<h1>Post</h1>
<dl>
<?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
    <input type="text" name="method" />
    <input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
    <input type="text" name="stuff" />
    <input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
    <input type="button" value="submit" onclick="document.theForm.submit();" />
</form>

</body></html>

ask by Stewart translate from so

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-02-24T05:23:09+0000

If you submit the form via Javascript (ie formElement.submit() or anything equivalent), then none of the submit buttons are considered successful and none of their values are included in the submitted data.

(如果您通过Javascript提交表单（即formElement.submit()或等效的任何东西），然后没有提交按钮都被认为是成功的，没有它们的值都包含在提交的数据。)

(Note that if you submit the form by using submitElement.click() then the submit that you had a reference to is considered active; this doesn't really fall under the remit of your question since here the submit button is unambiguous but I thought I'd include it for people who read the first part and wonder how to make a submit button successful via JS form submission. Of course, the form's onsubmit handlers will still fire this way whereas they wouldn't via form.submit() so that's another kettle of fish...)

(（请注意，如果您使用submitElement.click()提交表单，那么您引用的提交被认为是活动的;这并不属于您的问题的范围，因为这里的提交按钮是明确的，但我认为我将它包含在阅读第一部分并想知道如何通过JS表单提交成功提交按钮的人中。当然，表单的onsubmit处理程序仍然会以这种方式触发，而它们不会通过form.submit()这样那是另一条鱼......）)

If the form is submitted by hitting Enter while in a non-textarea field, then it's actually down to the user agent to decide what it wants here.

(如果通过在非textarea字段中按Enter键来提交表单，那么它实际上是由用户代理决定它想要的内容。)

The specs don't say anything about submitting a form using the enter key while in a text entry field (if you tab to a button and activate it using space or whatever, then there's no problem as that specific submit button is unambiguously used).

(规范没有说明在文本输入字段中使用回车键提交表单的任何内容（如果您选择按钮并使用空格或其他任何内容激活它，那么没有问题，因为明确使用了特定的提交按钮）。)

All it says is that a form must be submitted when a submit button is activated, it's not even a requirement that hitting enter in eg a text input will submit the form.

(它只是表示必须在激活提交按钮时提交表单，甚至不要求按输入例如文本输入提交表单。)

I believe that Internet Explorer chooses the submit button that appears first in the source;

(我相信Internet Explorer会选择首先出现在源中的提交按钮;)

I have a feeling that Firefox and Opera choose the button with the lowest tabindex, falling back to the first defined if nothing else is defined.

(我有一种感觉，Firefox和Opera选择具有最低tabindex的按钮，如果没有其他定义，则回退到第一个定义的按钮。)

There's also some complications regarding whether the submits have a non-default value attribute IIRC.

(关于提交是否具有非默认值属性IIRC，也存在一些复杂性。)

The point to take away is that there is no defined standard for what happens here and it's entirely at the whim of the browser - so as far as possible in whatever you're doing, try to avoid relying on any particular behaviour.

(需要注意的是，对于此处发生的事情没有明确的标准，而且完全是浏览器的一时兴起 - 所以尽可能在你正在做的事情中，尽量避免依赖任何特定的行为。)

If you really must know, you can probably find out the behaviour of the various browser versions but when I investigated this a while back there were some quite convoluted conditions (which of course are subject to change with new browser versions) and I'd advise you to avoid it if possible!

(如果你真的必须知道，你可能会发现各种浏览器版本的行为，但是当我调查这一段时间后，有一些非常复杂的条件（当然可能会随着新的浏览器版本而改变）并且我建议如果可能的话，你要避免它！)

Categories

javascript - 如何确定HTML表单上的默认提交按钮？(How is the default submit button on an HTML form determined?)

javascript - 如何确定HTML表单上的默认提交按钮？(How is the default submit button on an HTML form determined?)

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags