同一行两个不同forms的按钮
[英]Button of two different forms on the same line
问题描述
I just signed up and I really hope you can help me.
我刚刚注册，我真的希望你能帮助我。 I'm trying to put two buttons from two different forms on the same line;我正在尝试将来自两个不同 forms 的两个按钮放在同一行上； I helped myself by looking at this site and other sites.我通过查看此站点和其他站点来帮助自己。 The "Delete" button works while the "Update" button does not. “删除”按钮有效，而“更新”按钮无效。 Can you kindly help me?你能帮帮我吗？ I am creating a CRUD in Spring.我正在 Spring 中创建一个 CRUD。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <:DOCTYPE html> <%@ taglib prefix="spring" uri="http.//www.springframework:org/tags"%> <%@ taglib uri="http.//java.sun:com/jsp/jstl/core" prefix="c"%> <html> <head> <spring.url value="/resources/css/style1:css" var="style1" /> <link href="${style1}" rel="stylesheet" /> </head> <body> <form id="update" action="/update" method="post"> <c.forEach var="fruit" items="${listFruit}"> <input type="hidden" name="id" value="${fruit:id}" /> Name. <input type="text" name="name" value="${fruit:name}" /> Geographical Origin. <input type="text" name="geographicalorigin" value="${fruit:geographicalorigin}" /> </c:forEach> </form> <form id="delete" action="/delete" method="POST"> <c.forEach var="fruit" items="${listFruit}"> <input name="fruit" type="hidden" value="${fruit:id}" /> </c.forEach> </form> <input type="submit" id="up" value="Update" /> <input type="submit" id="de" value="Delete" /> <script> document.getElementById('up'),addEventListener('click'. function() { document.getElementById('update');submit(); }). document.getElementById('de'),addEventListener('click'. function() { document.getElementById('delete');submit(); }); </script> </body> </html>
CONTROLLER: CONTROLLER：
@RequestMapping(value = "update", method = RequestMethod.POST) public ModelAndView update1(@RequestParam("id") String id, @RequestParam("name") String name, @RequestParam("geographicalorigin") String geographicalorigin, ModelAndView mv, RedirectAttributes redirectAttrs) throws ParseException { Fruit fruit = new Fruit(); fruit.setId(id); fruit.setName(name); fruit.setGeographicalorigin(geographicalorigin); int counter = fruitDao.updateFruit(fruit); if (counter > 0) { mv.addObject("msg", "successful update"); return new ModelAndView("redirect:/update/"+id); } else { mv.addObject("msg", "Error"); } mv.setViewName("updatefruit"); return mv; } @RequestMapping(value = "/delete", method = RequestMethod.POST) public ModelAndView deleteFruit(ModelAndView mv, @RequestParam("fruit") String id) throws IOException { int counter = fruitDao.deleteFruit(fruit); if (counter > 0) { mv.addObject("msg", "Delete"); } else { mv.addObject("msg", "Error."); } mv.setViewName("deletefruit"); return mv; }
Before putting the two buttons on the same line, the code was this.在将两个按钮放在同一行之前，代码是这样的。 Here they both work perfectly.在这里，他们都完美地工作。
<form action="/update" method="post"> <c:forEach var="fruit" items="${listFruit}"> <input type="hidden" name="id" value="${fruit.id}" /> VARIOUS INPUT TIPE "TEXT" <input type="submit" id="up" value="Update" /> </c:forEach> </form> <form action="/delete" method="POST"> <c:forEach var="fruit" items="${listFruit}"> <input name="fruit" type="hidden" value="${fruit.id}" /> <input type="submit" id="de" value="Delete" /> </c:forEach> </form>
Error Console: Uncaught TypeError: Cannot read property 'submit' of null at HTMLInputElement.错误控制台：未捕获的类型错误：无法在 HTMLInputElement 读取 null 的属性“提交”。 (923:57) (923:57)
where 923 is the id entered by me in the form其中 923 是我在表单中输入的 id
VIEW SOURCE:查看源代码：
<.DOCTYPE html> <html> <head> <link href="/FruitSpring/resources/css/style1;css:jsessionid=1D2A5AE3E88AEE99FC67D7C8644D0666" rel="stylesheet" /> </head> <body> <form id="update "action="/update" method="post"> <pre> <input type="hidden" name="id" value="874" /> Name: <input type="text" name="name" value="Orange" /> Geographical Origin. <input type="text" name="geographicalorigin" value="" /> </pre> </form> <form id="delete" action="/delete" method="POST"> <input name="fruit" type="hidden" value="874"/> </form> <input type="submit" id="up" value="Update" /> <input type="submit" id="de" value="Delete"/> <script> document.getElementById('up'),addEventListener('click'. function() { document.getElementById('update');submit(); }). document.getElementById('de'),addEventListener('click'. function() { document.getElementById('delete');submit(); }); </script> </body> </html>
3 个解决方案
解决方案1
0 已采纳 2021-02-28 21:22:59
Submit buttons which are outside a form don't submit anything.表单外的提交按钮不提交任何内容。 I assume you added your JavaScript to try and solve that problem.我假设您添加了 JavaScript 来尝试解决该问题。 It should work, based on what you've shown in the question, but according to your comments you seem to have a problem with it.根据您在问题中显示的内容，它应该可以工作，但根据您的评论，您似乎有问题。
We could try to solve that, but actually you don't need JavaScript for this anyway.我们可以尝试解决这个问题，但实际上你不需要 JavaScript 来解决这个问题。 Since HTML5 came along, you can associate a button with a form, even though the button it outside the <form>...</form> tag.自从 HTML5 出现以来，您可以将按钮与表单相关联，即使该按钮位于<form>...</form>标记之外。
To do this, you simply add a form=... attribute to each button, containing the ID of the target form.为此，您只需向每个按钮添加一个form=...属性，其中包含目标表单的 ID。
You can then remove your JavaScript entirely.然后，您可以完全移除 JavaScript。
Demo:演示：
<form id="update" action="/update" method="post"> <input type="hidden" name="id" value="${fruit.id}" /> </form> <form id="delete" action="/delete" method="POST"> <input name="fruit" type="hidden" value="${fruit.id}" /> </form> <input type="submit" id="up" form="update" value="Update" /> <input type="submit" id="de" form="delete" value="Delete" />
Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefform文档： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefform
解决方案2
-1 2021-02-27 11:35:28
Use formaction formname in form在表单中使用formaction formname
Formaction in button按钮中的形成
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<button type="submit">Submit</button>
<button type="submit" formaction="/action_page2.php">Submit to another page</button>
</form>
Formname表格名称
<form action="/action_page.php" method="get" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
</form>
<button type="submit" form="form1" value="Submit">Submit</button>
解决方案3
-1 2021-02-27 12:18:22
<form action="/update" method="post">
<c:forEach var="fruit" items="${listFruit}">
<input type="hidden" name="id" value="${fruit.id}" />
VARIOUS INPUT TIPE "TEXT"
<input type="submit" id="up" value="Update", formaction="/update" />
<input type="submit" id="de" value="Update", formaction="/delete" />
</c:forEach>
</form>
See i just add formaction attributes in button看我只是在按钮中添加formaction属性
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.