Processing multiple forms in one page using Mongod

问题:

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?

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>

Thanks for your help

回答1:

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>

Then change your javascript to this:

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

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

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