单个HTML表单中的多个提交按钮
[英]Several submit buttons in a single HTML form
问题描述
我会追逐。 我希望有两个单独的按钮，它们具有两个独特的功能。 但是，以相同的形式获取数据。 我面临的当前问题是onSubmit()它将始终使用我附加到表单的任何按钮执行，而不是使用其自身的函数执行。
checkUser.js ：从输入字段中获取用户名，并尝试将其与数据库（Oracle）匹配
更新1：
我已经相应地更改了它们。 但是，按Check仍然会将我转发到StaffRegAuth.jsp而不是执行checkUser ，然后打开一个新窗口。
<form action="StaffRegAuth.jsp" name="form" method="post"> ... <button onClick="return validStaffReg();">Register</button> <button onclick="return checkUser()">Check</button> </form>
更新2：
更新了我的checkUser.js，因为这似乎是问题所在
StaffReg.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Staff Registration</title> <%-- Javascript --%> <script type="text/javascript" src="JS/validStaffReg.js"></script> <script type="text/javascript" src="JS/preventSpace.js"></script> <script type="text/javascript" src="JS/checkUser.js"></script> </head> <body> <%response.addHeader( "Cache-Control", "no-cache"); response.addHeader( "Pragma", "no-cache"); response.addHeader( "Expires", "0"); %> <h1 align="center"> Account Registration: </h1> <form action="StaffRegAuth.jsp" name="form" method="post"> <div align="center"> <table style="width = 30%"> <tr> <td>User Name:</td> <td> <input type="text" name="username" onKeyDown="preventSpace(this)"> </td> </tr> <tr> <td>Password:</td> <td> <input type="password" name="password" onKeyDown="preventSpace(this)"> </td> </tr> <tr> <td>User Group:</td> <td> <select name="userGroup"> <option value="1">Administrator </optin> <option value="2">Clerk </optin> <option value="3">Operations </optin> <option value="4">Sales </optin> </select> </td> </tr> <tr> <td> <button onClick="return validStaffReg(form)">Register</button> </td> <td> <button onClick="return checkUser(form)">Check</button> </td> </tr> </table> </div> </form> </body> </html>
validStaffReg.js
// JavaScript Document function validStaffReg(form) { if (document.form.password.value == "" && document.form.username.value == "") { alert("Please enter a Password and Login ID."); document.form.password.focus(); return false; } if (document.form.username.value == "") { alert("Please enter a Login ID."); document.form.username.focus(); return false; } if (document.form.password.value == "") { alert("Please enter a Password."); document.form.password.focus(); return false; } return true; }
checkUser.js
function checkUser(form) { if (document.form.username.value != "" || document.form.username.value != null) { var myWindow = window.open("checkUser.jsp", "MsgWindow", "width=200, height=100"); myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>"); document.form.username.focus(); return false; } return true; }
3 个解决方案
解决方案1
1 已采纳 2015-01-30 15:07:14
不要使用提交。
即，不要使用<input type="submit">
而是制作两个单独的按钮并在onclick上调用不同的功能。 请注意，您仍然可以获取表单值。
即
<button onclick="return reqfunc()">
使用return ，现在可以使用该功能了。 如果要返回表单而不return false下一页，则只需在javascript中return false 。
解决方案2
1 2015-01-30 15:08:56
使用<button onclick='YourFunction()'>Button Text</button>
解决方案3
0 2015-01-30 15:34:24
我经常使用的技巧之一如下所示。
<form action="submit.jsp">
<button type="submit" name="submit_form" value="1" class="hiddenSubmit">Submit</button>
...
<button type="submit" name="clear_form" value="1">Clear</button>
<button type="submit" name="submit_form" value="1">Submit</button>
</form>
通过为按钮赋予不同的名称，您可以让表单执行一致的所有处理，并让服务器管理任何特定于按钮的处理。 当然，您也可以将事件处理程序附加到单独的按钮上。
为什么有两个[name="submit_form"]按钮？ 第一个具有您可以设置样式的类，以使其处于活动状态但不可见（例如， position: absolute; top: -1000px; left: -1000px ），以便键盘<Enter>将触发该按钮，而不是另一个button[name="clear_form"] 。
使用带有多个提交按钮的表单中的输入按钮提交表单
[英]Submitting a form with the enter button in a form with several submit buttons
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.