我在一个表单中有两个提交按钮。我如何确定哪一个击中了服务器端?


当前回答

在HTML5中,你可以在输入字段中使用formaction和formmethod属性

<form action="/addimage" method="POST">
<button>Add image</button>
<button formaction="/home" formmethod="get">Cancel</button>
<button formaction="/logout" formmethod="post">Logout</button>
</form>

其他回答

<form>
    <input type="submit" value="Submit to a" formaction="/submit/a">
    <input type="submit" value="submit to b" formaction="/submit/b">    
</form>

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

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

因为你没有指定你使用的服务器端脚本方法,我将给你一个适用于Python的例子,使用CherryPy(尽管它可能对其他上下文也有用):

<button type="submit" name="register">Create a new account</button>
<button type="submit" name="login">Log into your account</button>

您可以使用名称(带有<button>标记而不是<input>标记),而不是使用值来确定按下了哪个按钮。这样,如果您的按钮碰巧有相同的文本,也不会造成问题。所有表单项(包括按钮)的名称都作为URL的一部分发送。

在CherryPy中,每一个都是执行服务器端代码的方法的参数。因此,如果你的方法只有**kwargs作为参数列表(而不是乏味地输入每个表单项的每个名称),那么你可以检查哪个按钮被按下了,像这样:

if "register" in kwargs:
    pass # Do the register code
elif "login" in kwargs:
    pass # Do the login code

处理多个提交按钮的最佳方法是在服务器脚本中使用切换案例

<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">JavaScript</button>
    <button name="subject" type="submit" value="jquery">jQuery</button>
</form>

服务器代码/服务器脚本-你提交表单的地方:

文件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;
    }
?>

来源:W3Schools.com

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

<button type="submit" formaction="/action_one">First action</button>
<button type="submit" formaction="/action_two">Second action</button>

显然,这在Internet Explorer 9和更早的版本中不起作用,但对于其他浏览器应该没问题(参见:w3schools.com HTML <button> formaction Attribute)。

就我个人而言,我通常使用JavaScript远程提交表单(以获得更快的感知反馈),并使用这种方法作为备份。在这两者之间,唯一不涉及的是禁用JavaScript的ie9版本之前的Internet Explorer。

当然,如果不管按哪个按钮,基本上在服务器端执行相同的操作,这可能是不合适的,但通常情况下,如果有两个可用的用户端操作,那么它们也会映射到两个服务器端操作。

正如Pascal_dher在注释中指出的,这个属性在<input>标记上也可用。