我正在构建一个web应用程序,我的下拉菜单上有一个问题。目标是,只有在下拉菜单中选择数字时,才能提交数据。
只需检查下拉列表是否已设置就足够了。如果请求的输入无效,则正确的响应将是400。
app.get('/lbc.js', (req, res) => {
if (req.body.dropdown === undefined || req.body.dropdown === null)
res.status(400).send({ message: "Drop down was not selected" });
return;
}
// continue with whatever you want if submit is possible
}
你的前端也需要处理这个响应,因为现在它可能不会区分它是否有效。因此,如果您要捕获表单的提交事件,您可以使用fetch
api自己发送请求,并对200(当响应成功时(或类似400(请求失败(的请求执行不同的操作。
编辑:您可以在此处阅读如何创建和处理提交事件:https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event
在这里,您可以阅读如何通过javascript发送网络请求:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
以下是您需要执行的步骤:
- 在表单上输入
id
,例如<form id="myForm" ... >
- 启动JavaScript标记,即
<script> </script>
- 在这些标记中,首先获取表单引用:
const form = document.findElementById("myForm");
- 在上面放置一个提交事件监听器,就像他们在链接中所做的那样
- 在事件处理程序函数中,发送请求并处理响应(例如,如果出现错误,则显示消息,如果成功,则执行其他操作(
4月7日编辑:
关于你的代码和你的评论,我有以下几点要说:
- 您已经创建了两个表单,一个用于下拉列表,另一个用于按钮。它们都应该在同一个
<form></form>
标记中。当您单击提交按钮时,所有<input>
字段都将发送到表单提交的位置 - 在将数据发送到服务器之前,您似乎需要检查所有字段是否填写正确。就像我在之前的回答中所说的,你需要创建一个能够做到这一点的脚本。在这个链接中,你可以用一种简单的方式再次阅读如何做这样的事情
- 通过字段的
id
获取元素,可以再次检查字段是否有值。例如,如果您有一个类似:<input type="text" id="firstName" name="firstName" />
的输入,您可以在javascript中获得该字段的值,例如:const valueFromField = document.getElementById("firstName").value;
希望这能给你一些新步骤的提示。在我看来,做一些基本的javascript教程,让你深入了解这些东西是如何工作的,这可能是一个好主意。
根据给定的详细信息,试试这个。
您可以检查该值并执行以下操作。
if(req.body && req.body.dropdown) {
res.send('submit is possible')
} else {
res.send('Please select the amount!')
}
也可使用POST方法路由
app.post('/test', function (req, res) {
res.send('POST request to the homepage')
})
阅读有关Express.js路由的更多信息