使用Mongodb和Node.js在一页中处理多种表单 [英] Processing multiple forms in one page using Mongodb and node.js

问题描述

我要在同一页面上登录和注册.我指定了两种不同的发布数据的途径，但是当我点击注册表单末尾的注册按钮时，它保存了登录表单输入(没有).我看着这个问题(多个表单和一个处理页面).它将如何与node一起工作，这意味着我必须为不同形式创建一个模块吗?

I am having my sign in and registration form both in the same page. I have specified two different routes for posting the data but it saves sign-in form inputs (which are none) when I hit the register button at the end of the registration form? I looked at this question(Multiple forms and one processing page). How would it work with node, would that means I have to create a module for different forms?

这是我的代码.最后，我有一个小脚本，这也是因为我的引导程序模板的Slider函数与Submit函数冲突.

Here is my code. I have a small script at the end also because the slider function of my bootstrap template was clashing with the submit function.

<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>

感谢您的帮助

推荐答案

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

Well, first off because you have two forms, you have to specify which form to submit on a button click. Right now any button click would submit just the first form. Give first form's submit button class registerButton and second form's submit class loginButton. I would also suggest giving classes to your forms. One will be registerForm, another is loginForm. Then change your HTML to reflect the changes

<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更改为此:

Then change your javascript to this:

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

现在，您可以向两个不同的路线提交两个表单.
一种形式将进入样本，另一种形式将进入仪表板，因此在服务器上(位于Node中)，您可以检查它是哪条路线. 我建议使用一种Node框架与您的应用程序一起使用. 您可以尝试 Express .它将大大简化您的路线工作. 这样，您就可以像这样简单地编写路线了:

Now you are able to submit two forms to two different routes.
One form would go to samples and the other to dashboard, so on your server (in Node) you can check which route it is. I would suggest using one of the Node frameworks to work with your application. You can try Express. It will drastically simplify your work with routes. It will allow you to write routes as easy as this:

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的更多信息.

You can read more on Express from a suggested list here.

这篇关于使用Mongodb和Node.js在一页中处理多种表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！