如何只启用提交功能,当下拉列表中的smth被选中时



我正在构建一个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
}

你的前端也需要处理这个响应,因为现在它可能不会区分它是否有效。因此,如果您要捕获表单的提交事件,您可以使用fetchapi自己发送请求,并对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路由的更多信息

最新更新