使用 Mongodb 和 node.js 在一个页面中处理多个表单

Question

我的登录信息和注册表单都在同一个页面中。我已经指定了两种不同的数据发布路径，但是当我点击注册表末尾的注册按钮时，它会保存登录表单输入（没有输入）？我看了这个问题（Multiple forms and one processing page）。它如何与节点一起工作，这是否意味着我必须为不同的表单创建一个模块？

这是我的代码。最后我有一个小脚本，因为我的引导模板的滑块功能与提交功能发生冲突。

<h2>Register<h2>
<form method="POST" action="/samples"> 
    <input type="text" name="fullName" id="fullName" class="input-lg " placeholder="your full name" data-required="true">
    <input type="text" name="age" id="age" class="input-lg" placeholder="age">
    <input type="text" name="city" id="city" class="input-lg" placeholder="Your City"> 
    <input type="text" name="job" class="input-lg" placeholder="Your Job">
    <input type="text" name="username" class="input-lg " placeholder="prefered username" data-required="true">
    <input type="password" name="password" class="input-lg" placeholder="Password">
    <input type="email" name="email" class="input-lg " placeholder="your email" data-required="true">
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>

<h2>Login!</h2>
<form method="POST" action="/dashboard">
    <hr class="colorgraph">
    <input type="email" name="emaillog" class="input-lg " placeholder="your email" data-required="true">
    <input type="password" name="passwordlog" class="input-lg" placeholder="Password">
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>

<script>
    $('button').click( function() {
        $('form').submit();
    });
</script>

感谢您的帮助

Answer 1

首先，因为您有两个表单，您必须指定在单击按钮时提交哪个表单。 现在任何按钮点击都会提交第一个表单。 给第一个表单的提交按钮类registerButton 和第二个表单的提交类loginButton。 我还建议给你的表格上课。一个是registerForm，另一个是loginForm。 然后更改您的 HTML 以反映更改

<form method="POST" action="/samples" class="registerForm"> 
...
<button type="submit" class="btn btn-primary registerButton">Sign in</button>
<form method="POST" action="/dashboard" class="loginForm">
...
<button type="submit" class="btn btn-primary loginButton">Log in</button>

然后将您的 javascript 更改为：

    $('button.registerButton').click( function() {
        $('form.registerForm').submit();
    });
    $('button.loginButton').click( function() {
        $('form.loginForm').submit();
    });

现在您可以将两个表单提交到两个不同的路线。
一个表单会转到 samples，另一个表单会转到 dashboard，因此在您的服务器（在 Node 中）上，您可以检查它是哪条路由。 我建议使用其中一种 Node 框架来处理您的应用程序。 你可以试试Express。它将大大简化您的路线工作。 它将允许您像这样简单地编写路线：

app.post('/samples', function(req, res){
    // check register form
    // res.send('user' + req.body);
});
app.get('/dashboard', function(req, res){
    // check login form
    // res.send('user' + req.body);
});

您可以从建议列表here 中阅读更多有关 Express 的信息。

Answer 2

您可以将 method="POST" 和 formaction="/samples" （和 formaction="/dashboard" 分别）添加到按钮标签，然后按钮不会混淆它将表单发送到哪个端点。

<button method="POST" formaction="/samples" type="submit" class="btn btn-primary">Sign in</button>

您可以阅读更多关于它的信息here。

Answer 3

如果您使用的是 nodejs 车把和控制器

1. 我在 html/handlebars 文件中的两个表单签名：

   <form action="/user/login/logData" method="POST">
   
   <form action="/user/login/regData" method="POST">
   

2. 在我的 app.js/server.js 文件中添加了一个控制器，如下所示

   const userAuthController=require("./controllers/loginregister.controller")
   app.use("/user",userAuthController)
   

3. 我在控制器文件中的路由（./controllers/loginregister.controller.js）

   const express=require("express")
   const router=express.Router();
   router.get("/login",(req,res) => {
       console.log("page displayed")
       res.render("../views/users/registration");
   })
   
   router.post("/login/logData",(req,res) => {
       console.log("login")
       res.render("../views/users/registration");
   })
   
   router.post("/login/regData",(req,res) => {
       console.log("register")
       res.render("../views/users/registration");
   })
   
   module.exports = router;
   

注意：您可以使用特定 post 方法中的代码来使用 mongoose 处理表单数据。