首页 > 解决方案 > HTML 表单和 NodeJS 的小错误

问题描述

大家好,我现在面临一个小错误,我有两个 html 表单和 nodeJS。并且在 NodeJS 中使用 POST 请求,无论如何它只会发送到其中一个。这是代码

<tr class="digitalLink"><td class="label">Input: Uncompressed GS1 Digital Link URI</td><td>

<form id="signUp"class="form-signUp" action="/compression" method="get" >
    <input id="uncompressedDigitalLinkInput" class="digitalLink" type="text" v-model="uncompressedDigitalLinkInput" name="compression"></td>

    <td class="charCount">{{uncompressedDigitalLinkInput.length}}</td>

    <button type="submit" form="signUp" style="margin-top:30px"
    class="btn btn-lg btn-primary btn-block" value="Compressed" >Compressed</button>
</form>

第二种形式:

<tr class="compressedDigitalLink"><td class="label">Input: Compressed GS1 Digital Link URI</td><td>
<form id="signUp"class="form-signUp" action="/decompression" method="post" >

<input id="compressedDigitalLinkInput2" class="compressedDigitalLink" type="text" v-model="compressedDigitalLinkInput2" name="decompression"></td>

<td class="charCount">{{compressedDigitalLinkInput2.length}}</td>

<button type="submit" form="signUp" style="margin-top:30px"
class="btn btn-lg btn-primary btn-block" value="Uncompressed" >Uncompressed</button>

即使我点击第二种形式的按钮,我仍然有这个错误信息 在此处输入图像描述

在这里:NodeJS 代码

    app.post('/decompression', function(req,resp){ //Post Response
  var decompression = req.body.decompression;
  console.log("Mon deuxieme test" + decompression);
});

非常感谢你的帮助

标签: htmlnode.jsforms

解决方案


我认为你在这里有两个问题。

  • <button type="submit" form="signUp" style="margin-top:30px" class="btn btn-lg btn-primary btn-block" value="Uncompressed" >Uncompressed</button>
    两个提交按钮都指向同一个表单id="signUp",也就是第一个表单。每个 HTML 元素都应该有一个唯一 ID,您需要为表单指定不同的 ID 并在提交按钮 ( form="signUp1", form="signUp2") 中引用它们。或者最好您可以删除提交按钮中的表单属性,因为两个提交按钮都在各自的表单中。
  • <form id="signUp"class="form-signUp" action="/decompression" method="post">
    我认为这不是action="/decompression"引用您的 nodejs 端点的有效方法。在您的本地计算机上action="http://localhost:8080/decompression",您可能拥有 PORT 可能会因您的情况而异。

    希望我的回答有帮助。

推荐阅读