同一行的两种不同形式的按钮

Question

我刚刚注册，我真的希望你能帮助我。我试图将来自两种不同形式的两个按钮放在同一行上；我通过查看此站点和其他站点来帮助自己。 “删除”按钮有效，而“更新”按钮无效。你能帮帮我吗？我正在 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>

控制器：

@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;
    }

在将两个按钮放在同一行之前，代码是这样的。在这里他们都完美地工作。

<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

错误控制台：未捕获的 TypeError：无法在 HTMLInputElement 处读取属性 'submit' 的 null。 (923:57)

其中923是我在表单中输入的id

查看源代码：

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

Answer 1

在表单中使用formaction formname

按钮中的动作

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

表格名称

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

Answer 2

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

看到我只是在按钮中添加了formaction属性

Answer 3

表单外的提交按钮不会提交任何内容。我假设您添加了 JavaScript 来尝试解决该问题。根据您在问题中显示的内容，它应该工作，但根据您的评论，您似乎对此有问题。

我们可以尝试解决这个问题，但实际上您根本不需要 JavaScript。自 HTML5 出现以来，您可以将按钮与表单相关联，即使该按钮位于 <form>...</form> 标记之外。

为此，您只需向每个按钮添加一个 form=... 属性，其中包含目标表单的 ID。

然后您可以完全删除 JavaScript。

演示：

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

文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefform

同一行的两种不同形式的按钮

Button of two different forms on the same line

html

javascript

forms

jsp