单击按钮时表单未提交 - onclick="this.form.submit()"

Question

单击按钮时，我的表单未提交。它工作正常，但我不知道为什么它停止工作。它不会控制台日志中的任何内容。我没有输入类型提交，因为我正在使用 onclick 方法操作按钮。

这是我的 HTML 代码（包含在表格中）：

<tbody>
                    <% produtos.forEach(function(produto){ %>
                        <tr>
                            <form action="/deleteProduto" method="POST"></form>
                                <td><%= produto._id %></td>
                                <td><%= produto.nomeProduto %> </td>
                                <td><%= produto.marcaProduto %> </td>
                                <td><%= produto.categoriaProduto %> </td>
                                <td><%= produto.descricaoProduto %></td>
                                <td><span>R$ </span><%= produto.precoUnitario %></td>
                                <td><%= produto.quantidadeEstoque %></td>
                                <td><%= produto.condicaoProduto %></td>
                                <td class="actions">
                                  <a href="/editarProduto" name="editButton" class="btn btn-outline-dark" value="<%=produto._id%>">Editar</a>
                                  <button name="deleteButton" class="btn btn-outline-dark" value="<%=produto._id%>" onclick="this.form.submit()">Remover</button>
                                </td>
                            </form>
                        </tr>
                    <%})%>
                </tbody>

这是后端：

app.post("/deleteProduto", function(req,res){

const clickedItem = req.body.deleteButton;
console.log("clicado");
Produto.findByIdAndDelete({_id: clickedItem}, function(err){
    if(err){
        res.send(err);
    }else{
        res.redirect("/adm");
    }
})

})

非常感谢您的帮助:)

Answer 1

我认为您不能在这样的 HTML 属性中使用对 this 的 JavaScript 引用。相反，您需要在 JavaScript 中创建并引用一个方法，该方法在 DOM 中选择表单并提交它。

例如，

<button name="deleteButton" class="btn btn-outline-dark" value="<%=produto._id%>" onclick="submitForm()">Remover</button>

[...]

<script>
function submitForm() {
  const form = document.querySelector('form');
  form.submit();
}
</script>

但是，如果您不做任何事情来转换数据，您可以完全摆脱 onsubmit 属性，并用 type="submit" 替换它，它会做同样的事情。

话虽如此，您的form 不是有效表格。这些是表格单元格，而不是表单域。

<td><%= produto._id %></td>
<td><%= produto.nomeProduto %> </td>
<td><%= produto.marcaProduto %> </td>
<td><%= produto.categoriaProduto %> </td>
<td><%= produto.descricaoProduto %></td>
<td><span>R$ </span><%= produto.precoUnitario %></td>
<td><%= produto.quantidadeEstoque %></td>
<td><%= produto.condicaoProduto %></td>

你想做的是：

<td><input name="id" value="<%= produto._id %>" /></td>
<td><input name="nomeProduto" value="<%= produto.nomeProduto %>" /> </td>
[etc...]

Answer 2

好吧，我可以再想一想，我可以通过在表单中​​添加一个 Id 并在 onclick 表单方法上找到它来解决它。

结果是这样的：

<form action="/deleteProduto" method="POST" id="deleteProductForm"></form>
                                <td><%= produto._id %></td>
                                <td><%= produto.nomeProduto %> </td>
                                <td><%= produto.marcaProduto %> </td>
                                <td><%= produto.categoriaProduto %> </td>
                                <td><%= produto.descricaoProduto %></td>
                                <td><span>R$ </span><%= produto.precoUnitario %></td>
                                <td><%= produto.quantidadeEstoque %></td>
                                <td><%= produto.condicaoProduto %></td>
                                <td class="actions">
                                  <a href="/editarProduto" name="editButton" class="btn btn-outline-dark" value="<%=produto._id%>">Editar</a>
                                  <button name="deleteButton" class="btn btn-outline-dark" value="<%=produto._id%>" onclick="document.querySelector('#deleteProductForm').submit()">Remover</button>
                                </td>
                            </form>

Answer 3

你可以通过让按钮有一种提交类型来完全避免这个问题吗？

<button type="submit" name="deleteButton" class="btn btn-outline-dark" value="<%=produto._id%>">Remover</button>