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

Question

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

Answer 1

请注意，如果您有多个提交按钮并按下回车键（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

Answer 2

一个在不同按钮点击时发送不同表单动作的 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>

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

Answer 3

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

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

Answer 4

将name 定义为array。

<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 非常重要，因为如果没有，两者都会被解析。

Answer 5

处理多个提交按钮的最佳方法是在服务器脚本中使用 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">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

Answer 6

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

Answer 7

你也可以这样（我觉得有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），您可以将“行”读取为数组以获取 id。

$_POST['row'] 将是一个只有一个元素的数组，格式为 [ id => value ]（例如：[ '123' => 'something' ]）。

所以，为了获得点击的 id，你需要这样做：

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

key

Answer 8

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

Answer 9

有一种新的 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 远程提交表单（以获得更快的感知反馈），并将这种方法作为备份。在这两者之间，唯一未涵盖的人是 I​​nternet Explorer 版本 9 之前禁用了 JavaScript。

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

正如 Pascal_dher 在 cmets 中所指出的，此属性也可用于 <input> 标记。

Answer 10

简单。您可以更改表单在不同的提交按钮点击时的操作。

在document.Ready中试试这个：

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

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

Answer 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';"/>
</form>

Answer 12

这非常容易测试：

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

Answer 13

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

Answer 14

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

Forms

When click on Login -> loginForm

When click on Save -> saveForm

When click on Register -> registrationForm

Answer 15

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

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

内部按钮的HTML（例如..>Update<..是用户看到的；因为提供了HTML，value是用户不可见的；它只发送到服务器. 这样就没有国际化和多种显示语言的不便（前一种方案，按钮的标签也是发给服务器的值）。

Answer 16

解决方案 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
}

Answer 17

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

Answer 18

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

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

Answer 19

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

Answer 20

你可以像这样展示按钮：

<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 是我从留作说明的表格中提取的其他一些值）

Answer 21

如果你给每个人一个名字，被点击的人将作为任何其他输入发送。

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