一个表单中的两个提交按钮

Ale*_*lex 493 html forms submit

我在表单中有两个提交按钮.如何确定哪个服务器被服务器端?

Par*_*ots 826

您可以为每个输入赋予不同的值并保持相同的名称:

<input type="submit" name="action" value="Update" />
<input type="submit" name="action" value="Delete" />
Run Code Online (Sandbox Code Playgroud)

然后在代码中检查以查看触发的内容:

if ($_POST['action'] == 'Update') {
    //action for update here
} else if ($_POST['action'] == 'Delete') {
    //action for delete
} else {
    //invalid action!
}
Run Code Online (Sandbox Code Playgroud)

唯一的问题是你将逻辑绑定到输入中的文本.您也可以为每个人提供一个唯一的名称,并检查$ _POST是否存在该输入:

<input type="submit" name="update_button" value="Update" />
<input type="submit" name="delete_button" value="Delete" />
Run Code Online (Sandbox Code Playgroud)

并在代码中:

if (isset($_POST['update_button'])) {
    //update action
} else if (isset($_POST['delete_button'])) {
    //delete action
} else {
    //no button pressed
}
Run Code Online (Sandbox Code Playgroud)

  • 对于i18n目的,使用所选答案可能更好. (37认同)
  • OP没有要求PHP. (16认同)
  • @LaszloPapp作为答案本身说,如果您使用上面选择的答案,您可以将表格国际化(即翻译成不同的语言或方言)而不影响逻辑.如果您使用此答案中的第一个选项,则逻辑取决于表单实际呈现的语言. (11认同)
  • i18n = i [nternationalizatio] n,18代表第一个和最后一个之间的18个字母. (5认同)
  • @RobinGreen:请原谅? (3认同)
  • @RobinGreen:我认为大多数人都会使用第二种逻辑,不是吗? (2认同)
  • 如果你在jQuery中使用$(form).serialize(),这不起作用. (2认同)

Gre*_*reg 406

如果您为每个人命名,则点击的名称将作为任何其他输入发送.

<input type="submit" name="button_1" value="Click me">
Run Code Online (Sandbox Code Playgroud)

  • 还要确保按钮名称的名称正确!例如,"button-1"不起作用.可以为某些人节省很多麻烦,所以请记住这一点. (92认同)
  • 通常,表单中的所有输入都与表单一起发送.由于仅在单击时提交按钮的值,因此您必须搜索这些预定义名称的表单值.我认为另一个答案(http://stackoverflow.com/a/21778226/88409)涉及给它们所有相同的名称,具有不同的值,更有意义.然后,您只需获取单个已知表单字段名称下的值.它还使得更明显的是,仅为给定的输入名称发送一个值(单击的值),就像单选按钮的工作方式(相同的名称,不同的值)一样. (19认同)
  • @Triynko,正如罗宾格林在回答的评论中所说,这个更适合国际化.例如,如果页面以西班牙语呈现,则按钮的文本可能会有所不同.因此,在这种情况下,拥有代码的逻辑取决于该按钮的文本将会中断.通过名称更安全,因为它是一个不向用户显示的值,因此可以更多地被视为"私有"变量而不是用户的消息. (5认同)
  • 为了澄清@sfarbota的评论:Parrot的答案中显示的*第一个*解决方案是有问题的,因为它依赖于测试*用户可见*值。这是可疑的 - 当更改用户可见的单词时中断的代码被认为是“脆弱的”。Parrot 的答案中显示的*第二个*解决方案很好 - 它与这个相同。Parrot 的第二个解决方案还显示了要编写的相应代码,因此它是比这个更有用的答案。 (2认同)
  • 请参阅 [Leo 的回答](/sf/answers/2234340741/),了解使用属性 `formaction` 的较新 HTML5 解决方案。或者参见 [kiril 的答案](/sf/answers/1524475851/) 了解如何让用户可见的 HTML 独立于发送到浏览器的值 - 解决国际化问题。 (2认同)

kir*_*ril 96

更好的解决方案包括使用按钮标签提交表单:

<form>
    ...
    <button type="submit" name="action" value="update">Update</button>
    <button type="submit" name="action" value="delete">Delete</button>
</form>
Run Code Online (Sandbox Code Playgroud)

这种方式对国际化和多种显示语言没有任何不便(在前一种解决方案中,按钮的标签也是发送给服务器的值).

  • 显然浏览器行为不同; 一些提交值属性,其他提交标签之间的字符串......所以要小心这一点. (13认同)
  • @Jeroen Bull.哪些浏览器在标签之间提交文本?输入或按钮应该只提交'value'属性.按钮可以在其标签之间包含任何内容,包括图像或其他HTML标签.这就是在输入元素上使用按钮的全部意义,并且您试图建议浏览器将所有内容转储为值?没门. (8认同)
  • 好的,你的权利.然后,我检查了HTML5 W3C工作草案.引用:>> value属性为表单提交提供元素的值.元素的值是元素的value属性的值(如果有),否则为空字符串.>>注意:如果按钮本身用于启动表单提交,则按钮(及其值)仅包含在表单提交中. (7认同)
  • @kiril该链接的片段使用两种不同类型的`<button>`:`submit`和`reset`.请注意,`reset`不提交任何内容,只是重置表单.所以Jeroen的论点仍然存在. (2认同)

Leo*_*Leo 75

有一个新的HTML5方法,formaction属性:

<button type="submit" formaction="/action_one">First action</button>
<button type="submit" formaction="/action_two">Second action</button>
Run Code Online (Sandbox Code Playgroud)

显然这在IE9及更早版本中不起作用,但对于其他浏览器,你应该没问题(参见:w3schools.com HTML <button>编队属性).

就个人而言,我通常使用Javascript远程提交表单(以获得更快的感知反馈),这种方法作为备份.在两者之间,唯一未被覆盖的人是IE <9且禁用Javascript.

当然,如果您基本上采用相同的操作服务器端,无论按下哪个按钮,这可能都是不合适的,但通常如果有两个用户端操作可用,那么它们也将映射到两个服务器端操作.

编辑: 正如Pascal_dher在评论中所指出的,该属性也可以在<input>标签上使用.

  • [MDN 上的`formaction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction) (3认同)
  • 也可用于“输入”标签。根据w3schools:使用按钮标签时,不同的浏览器可能会提交不同的值:http://www.w3schools.com/tags/tag_button.asp (2认同)
  • 给Rails用户的注意:如果使用`form_tag`创建表单,添加此属性将无效。我使它起作用的唯一方法是切换到`form_for`并使用`f.submit formaction:'your_path'`。 (2认同)

Pet*_*ley 26

这非常容易测试

<form action="" method="get">

<input type="submit" name="sb" value="One">
<input type="submit" name="sb" value="Two">
<input type="submit" name="sb" value="Three">

</form>
Run Code Online (Sandbox Code Playgroud)

只需将其放在HTML页面中,单击按钮,然后查看URL

  • 在这里使用GET是一种有点不好的做法,应该尽可能使用POST. (5认同)
  • @Syncrossus这是出于测试目的。 (2认同)

Mev*_*mir 20

<form>
    <input type="submit" value="Submit to a" formaction="/submit/a">
    <input type="submit" value="submit to b" formaction="/submit/b">    
</form>
Run Code Online (Sandbox Code Playgroud)

  • 注意:这似乎与 [Leo 的早期答案](/sf/answers/2234340741/) 相同,只是它显示使用“input”标签而不是“button”标签。 (2认同)

小智 16

使用格式HTML属性

<form action="/action_page.php" method="get">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <button type="submit">Submit</button><br>
    <button type="submit" formaction="/action_page2.php">Submit to another page</button>
</form>
Run Code Online (Sandbox Code Playgroud)

  • 这类似于 [Leo 之前的回答](/sf/answers/2234340741/)。 (3认同)

Joa*_*kim 11

也许建议的解决方案在2009年工作,但我已经测试了所有这些赞成的答案,没有人在任何浏览器中工作.

只有我找到工作的解决方案是这样的:(但我认为使用它有点难看)

<form method="post" name="form">
<input type="submit" value="dosomething" onclick="javascript: form.action='actionurl1';"/>
<input type="submit" value="dosomethingelse" onclick="javascript: form.action='actionurl2';"/>
Run Code Online (Sandbox Code Playgroud)

  • @ rybo111 IE9浏览器(女巫相对仍然广泛使用)不支持`formaction` (3认同)
  • 为什么不直接使用`formaction="actionurl1"`?你不需要 JavaScript。 (2认同)

Sha*_*are 10

处理多个提交按钮的最佳方法是在服务器脚本中使用switch case

<form action="demo_form.php" method="get">

Choose your favorite subject:

<button name="subject" type="submit" value="html">HTML</button>
<button name="subject" type="submit" value="css">CSS</button>
<button name="subject" type="submit" value="javascript">Java Script</button>
<button name="subject" type="submit" value="jquery">jQuery</button>

</form>
Run Code Online (Sandbox Code Playgroud)

服务器代码/服务器脚本 - 您提交表单的位置:

demo_form.php

<?php

switch($_REQUEST['subject']) {

    case 'html': //action for html here
                break;

    case 'css': //action for css here
                break;

    case 'javascript': //action for javascript here
                        break;

    case 'jquery': //action for jquery here
                    break;
}

?>
Run Code Online (Sandbox Code Playgroud)

资料来源:W3Schools.com


che*_*jan 9

一个 HTML 示例,用于在不同的按钮单击时发送不同的表单操作:

<form action="/login" method="POST">
    <input type="text" name="username" value="your_username" />
    <input type="password" name="password" value="your_password" />
    <button type="submit">Login</button>
    <button type="submit" formaction="/users" formmethod="POST">Add User</button>
</form>
Run Code Online (Sandbox Code Playgroud)

使用相同的表单来添加新用户和登录用户。


小智 7

您在一个表单示例中形成多个提交按钮

 <input type="submit" name="" class="btn action_bg btn-sm loadGif" value="Add Address" title="" formaction="/addAddress"> 
 <input type="submit" name="" class="btn action_bg btn-sm loadGif" value="update Address" title="" formaction="/updateAddress"> 
Run Code Online (Sandbox Code Playgroud)


tix*_*uta 7

请注意,如果您有多个提交按钮并按回车键(ENTER 键),则键盘上的默认按钮值将是 DOM 上的第一个按钮。

例子:

<form>
  <input type="text" name="foo" value="bar">
  <button type="submit" name="operation" value="val-1">Operation #1</button>
  <button type="submit" name="operation" value="val-2">Operation #2</button>
</form>
Run Code Online (Sandbox Code Playgroud)

如果您在此表单上按 ENTER 键,将发送以下参数:

foo=bar&operation=val-1
Run Code Online (Sandbox Code Playgroud)


Shu*_*ule 5

由于您未指定要使用的服务器端脚本编写方法,因此,我将为您提供一个使用CherryPy的适用于Python的示例(尽管它也可能对其他上下文有用):

<button type="submit" name="register">Create a new account</button>
<button type="submit" name="login">Log into your account</button>
Run Code Online (Sandbox Code Playgroud)

您可以使用名称(使用<button>标记代替<input>)来代替使用值来确定按下了哪个按钮。这样,如果您的按钮碰巧具有相同的文本,则不会造成问题。所有表单项的名称(包括按钮)都作为URL的一部分发送。在CherryPy中,每个参数都是执行服务器端代码的方法的参数。因此,如果您的方法仅具有**kwargs其参数列表(而不是乏味地键入每个表单项的每个名称),那么您可以检查查看按下了哪个按钮,如下所示:

if "register" in kwargs:
    pass #Do the register code
elif "login" in kwargs:
    pass #Do the login code
Run Code Online (Sandbox Code Playgroud)


Thi*_*ous 5

定义namearray

<form action='' method=POST>
    (...) some input fields (...)
    <input type=submit name=submit[save] value=Save>
    <input type=submit name=submit[delete] value=Delete>
</form>
Run Code Online (Sandbox Code Playgroud)

服务器代码示例(PHP):

if (isset($_POST["submit"])) {
    $sub = $_POST["submit"];

    if (isset($sub["save"])) {
        // save something;
    } elseif (isset($sub["delete"])) {
        // delete something
    }
}
Run Code Online (Sandbox Code Playgroud)

elseif非常重要,因为如果没有解析,两者都会被解析。请享用。