我在一个表单中有两个提交按钮。我如何确定哪一个被击中服务器端?
22 回答
解决方案 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
}
如果你给每个人一个名字,点击的那个将作为任何其他输入发送。
<input type="submit" name="button_1" value="Click me">
一个更好的解决方案包括使用按钮标签来提交表单:
<form>
...
<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="delete">Delete</button>
</form>
按钮内的HTML (例如..>Update<..
,用户看到的内容;因为提供了 HTML,所以value
用户不可见;它只发送到服务器。这样就没有国际化和多种显示语言的不便(在前一种解决方案,按钮的标签也是发送到服务器的值)。
有一种新的 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 属性)。
就个人而言,我通常使用 JavaScript 远程提交表单(以获得更快的感知反馈),并以这种方法作为备份。在这两者之间,唯一没有涉及到的是禁用 JavaScript 的版本 9 之前的 Internet Explorer。
当然,如果您基本上在服务器端采取相同的操作,而不管按下哪个按钮,这可能是不合适的,但通常如果有两个用户端操作可用,那么它们也会映射到两个服务器端操作。
正如 Pascal_dher 在评论中所指出的,这个属性也可以在<input>
标签上使用。
这非常容易测试:
<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。
使用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>
<form>
<input type="submit" value="Submit to a" formaction="/submit/a">
<input type="submit" value="submit to b" formaction="/submit/b">
</form>
处理多个提交按钮的最佳方法是在服务器脚本中使用 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
也许这里建议的解决方案在 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>
您在一个表单示例中为多个提交按钮形成操作:
<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">
定义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
非常重要,因为如果没有,两者都会被解析。
一个 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 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>
我认为您应该能够读取 GET 数组中的名称/值。我认为未点击的按钮不会出现在该列表中。
你也可以这样做(我认为如果你有 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']);
简单的。您可以更改表单对不同提交按钮单击的操作。
在document.Ready中试试这个:
$(".acceptOffer").click(function () {
$("form").attr("action", "/Managers/SubdomainTransactions");
});
$(".declineOffer").click(function () {
$("form").attr("action", "/Sales/SubdomainTransactions");
});
您还可以使用 href 属性并发送带有为每个按钮附加的值的 get。但是那时不需要表格
href="/SubmitForm?action=delete"
href="/SubmitForm?action=save"
由于您没有指定您使用的服务器端脚本方法,我将给您一个适用于 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>
请注意,如果您有多个提交按钮并且您按回车键(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的按钮
在此示例中,第一个按钮/preview
在新选项卡中启动不同的 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>
完整的文档在这里
您可以像这样显示按钮:
<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 是我从留下的表格中提取的一些其他值,以供说明)