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

Question

我在同一页面上登录并注册.我已经指定了两种不同的发布数据的路由,但是当我点击注册表单末尾的注册按钮时,它保存了登录表单输入(没有)？我看了这个问题(多个表格和一个处理页面).如何使用node,这是否意味着我必须为不同的表单创建一个模块？

这是我的代码.我最后还有一个小脚本,因为我的bootstrap模板的滑块功能与提交功能发生冲突.

<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();
    });

现在,您可以将两个表单提交到两个不同的路径.
一个表单将转到样本,另一个表单转到仪表板,因此在您的服务器上(在节点中),您可以检查它是哪个路由.我建议使用其中一个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);
});

您可以在此处从建议列表中阅读有关Express的更多信息.