Button of two different forms on the same line
Question
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; 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.
<%@ 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:
@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: error
Error Console: Uncaught TypeError: Cannot read property 'submit' of null at HTMLInputElement. (923:57)
where 923 is the id entered by me in the form
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 answers
solution1
0 ACCPTED 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. 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. Since HTML5 came along, you can associate a button with a form, even though the button it outside the <form>...</form> tag.
To do this, you simply add a form=... attribute to each button, containing the ID of the target form.
You can then remove your JavaScript entirely.
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
solution2
-1 2021-02-27 11:35:28
Use formaction formname in form
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>
solution3
-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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.