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


如果你给每一个名称,点击的将作为任何其他输入发送。

<input type="submit" name="button_1" value="Click me">

我认为您应该能够读取GET数组中的名称/值。我认为没有点击的按钮不会出现在列表中。


这非常容易测试:

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

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


解决方案1: 给每个输入一个不同的值,并保持相同的名称:

<input type="submit" name="action" value="Update" />
<input type="submit" name="action" value="Delete" />

然后在代码中检查哪些被触发:

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

这样做的问题是,您将逻辑绑定到输入中的用户可见文本。


解决方案2: 给每个对象一个唯一的名称,并检查$_POST是否存在输入:

<input type="submit" name="update_button" value="Update" />
<input type="submit" name="delete_button" value="Delete" />

在代码中:

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

一个更好的解决方案是使用按钮标签提交表单:

<form>
    ...
    <button type="submit" name="action" value="update">Update</button>
    <button type="submit" name="action" value="delete">Delete</button>
</form>

按钮内部的HTML(例如..>Update<..是用户所看到的;因为有HTML提供,值是不可见的用户;它只发送到服务器。这样就不会给国际化和多种显示语言带来不便(在前一种解决方案中,按钮的标签也是发送到服务器的值)。


也许这里建议的解决方案在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';"/>
</form>

简单。你可以在不同的提交按钮上点击改变表单的动作。

在文档中试试这个。准备好:

$(".acceptOffer").click(function () {
    $("form").attr("action", "/Managers/SubdomainTransactions");
});

$(".declineOffer").click(function () {
    $("form").attr("action", "/Sales/SubdomainTransactions");
});

你可以像这样显示按钮:

<input type="submit" name="typeBtn" value="BUY">
<input type="submit" name="typeBtn" value="SELL">

然后在代码中,你可以使用:

if request.method == 'POST':
    #valUnits = request.POST.get('unitsInput','')
    #valPrice = request.POST.get('priceInput','')
    valType = request.POST.get('typeBtn','')

(valUnits和valPrice是我从表单中提取的其他一些值,用于演示)


这里有一个新的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>标记上也可用。


因为你没有指定你使用的服务器端脚本方法,我将给你一个适用于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

你也可以这样做(我认为如果你有N个输入,这很方便)。

<input type="submit" name="row[456]" value="something">
<input type="submit" name="row[123]" value="something">
<input type="submit" name="row[789]" value="something">

一个常见的用例是为每个按钮使用来自数据库的不同id,这样稍后您就可以知道在服务器中单击了哪一行。

在服务器端(本例为PHP),您可以将“row”读取为数组以获取id。

$_POST['row']将是一个只有一个元素的数组,形式为[id => value](例如:[' 123' => 'something'])。

所以,为了得到点击的id,你做:

$index = key($_POST['row']);

key


<form method="post">
    <input type="hidden" name="id" value="'.$id.'" readonly="readonly"/>'; // Any value to post PHP
    <input type='submit' name='update' value='update' formAction='updateCars.php'/>
    <input type='submit' name='delete' value='delete' formAction='sqlDelete.php'/>
</form>

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

<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


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

将name定义为数组。

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

服务器代码示例(PHP):

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

    if (isset($sub["save"])) {
        // Save something;
    } elseif (isset($sub["delete"])) {
        // Delete something
    }
}

Elseif非常重要,因为两者都将被解析。


您还可以使用href属性并为每个按钮发送带有附加值的get。但那时就不需要填表格了

href="/SubmitForm?action=delete"
href="/SubmitForm?action=save"

使用formaction HTML属性(第5行):

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

由于您没有指定使用的服务器端脚本方法,因此我将给出一个适用于PHP的示例

<?php if(isset($_POST["loginForm"])) { print_r ($_POST); // FOR Showing POST DATA } elseif(isset($_POST["registrationForm"])) { print_r ($_POST); } elseif(isset($_POST["saveForm"])) { print_r ($_POST); } else{ } ?> <html> <head> </head> <body> <fieldset> <legend>FORM-1 with 2 buttons</legend> <form method="post" > <input type="text" name="loginname" value ="ABC" > <!--Always use type="password" for password --> <input type="text" name="loginpassword" value ="abc123" > <input type="submit" name="loginForm" value="Login"><!--SUBMIT Button 1 --> <input type="submit" name="saveForm" value="Save"> <!--SUBMIT Button 2 --> </form> </fieldset> <fieldset> <legend>FORM-2 with 1 button</legend> <form method="post" > <input type="text" name="registrationname" value ="XYZ" > <!--Always use type="password" for password --> <input type="text" name="registrationpassword" value ="xyz123" > <input type="submit" name="registrationForm" value="Register"> <!--SUBMIT Button 3 --> </form> </fieldset> </body> </html>

形式

当点击Login -> loginForm

当点击Save -> saveForm

当点击注册->注册表单


您可以在一个表单中设置多个提交按钮 例子:

 <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"> 

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

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


需要注意的是,如果您有多个提交按钮,并且您按了return (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>

如果你在这个表单上按ENTER键,将发送以下参数:

foo=bar&operation=val-1

更新后的答案是使用带有formaction和formtarget的按钮

在本例中,第一个按钮在新选项卡中启动了一个不同的url /预览。其他三个使用表单标记中指定的操作。

<button type='submit' class='large' id='btnpreview' name='btnsubmit' value='Preview' formaction='/preview' formtarget='blank' >Preview</button>
<button type='submit' class='large' id='btnsave' name='btnsubmit' value='Save' >Save</button>
<button type='submit' class='large' id='btnreset' name='btnsubmit' value='Reset' >Reset</button>
<button type='submit' class='large' id='btncancel' name='btnsubmit' value='Cancel' >Cancel</button>

完整的文档在这里


在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>