const express = require('express');
const expressLayouts = require('express-ejs-layouts');
const mongoose = require('mongoose');
const app = express();
//DB config
const db = require('./config/keys').mongoURI;
//Connect to Mongo
mongoose.connect(db, { useNewUrlParser: true, useUnifiedTopology: true})
.then(() => console.log('MongoDB connected...'))
.catch(err => console.log(err));
//EJS
app.use(expressLayouts);
app.set('view engine', 'ejs');
//Styles middleware
app.use('/css', express.static('css'));
app.use('/fonts', express.static('fonts'));
app.use('/vendor', express.static('vendor'));
app.use('/js', express.static('js'));
//Bodyparser
app.use(express.urlencoded({extended: false}));
//Routes
app.use('/', require('./routes/index'));
const PORT = process.env.PORT || 5000;
app.listen(PORT, console.log(`Server started on port ${PORT}`));
const express = require('express');
const router = express.Router();
//Welcome/register page
router.get('/', (req, res) => res.render('register'));
router.post('/', (req, res) => {
console.log(req.body);
res.send('Hello')
});
module.exports = router;
<div class="signup">
<!-- HEADER -->
<header class="signup__header">
<div class="container">
<div class="signup__header-content">
<p><a href="#">Already have an account?</a></p>
<a href="/login" class="btn">Sign In</a>
</div>
</div>
</header>
<!-- MAIN -->
<main class="signup__main">
<img class="signup__bg" src="" alt="">
<div class="container">
<form class="signup__container">
<div class="signup__logo">
<a href="#"><img src="fonts/icons/main/Logo_Forum.svg" alt="logo">Musevista</a>
</div>
<div class="signup__head">
<h3>Create a New Account</h3>
<p>By singin up you can start posting, replaying to topics, earn badges, favorite, vote topics and many more.</p>
</div>
<form action="/" method="POST">
<div class="signup__form">
<div class="row">
<div class="col-md-6">
<div class="signup__section">
<label class="signup__label" for="first-name">First Name</label>
<input type="text" class="form-control" name="firstname" id="first-name" value="<%= typeof firstname != 'undefined' ? firstname : '' %>">
</div>
</div>
<div class="col-md-6">
<div class="signup__section">
<label class="signup__label" for="last-name">Last Name</label>
<input type="text" class="form-control" name="lastname" id="last-name" value="<%= typeof lastname != 'undefined' ? lastname : '' %>">
</div>
</div>
</div>
<div class="signup__section">
<label class="signup__label" for="username">Username</label>
<input type="text" class="form-control" name="username" id="username" value="<%= typeof username != 'undefined' ? username : '' %>">
</div>
<div class="signup__section">
<label class="signup__label" for="email">Email Address</label>
<input type="text" class="form-control" name="email" id="email" value="<%= typeof email != 'undefined' ? email : '' %>">
</div>
<div class="signup__section">
<label class="signup__label" for="password">Password</label>
<div class="message-input">
<input type="password" class="form-control" name="password" id="password" value="<%= typeof password != 'undefined' ? password : '' %>">
<span class="message-input__strong">strong</span>
</div>
</div>
<div class="signup__checkbox">
<div class="row">
<div class="col-md-6">
<label class="signup__box">
<label class="custom-checkbox">
<input type="checkbox" checked="checked">
<i></i>
</label>
<span>I agree to the Terms & Conditions.</span>
</label>
</div>
<div class="col-md-6" data-visible="desktop">
<label class="signup__box">
<label class="custom-checkbox">
<input type="checkbox">
<i></i>
</label>
<span>Subscribe to newsletter</span>
</label>
</div>
</div>
</div>
<input class="signup__btn-create btn btn--type-02" type="submit" value="Create New Account">
</div>
</form>
</div>
</div>
</main>
<!-- FOOTER -->
<footer class="signup__footer">
<div class="container">
<div class="signup__footer-content">
<ul class="signup__footer-menu">
<li><a href="#">Teams</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Send Feedback</a></li>
</ul>
<ul class="signup__footer-social">
<li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-rss" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</footer>
</div>
默认情况下,我将我的网站加载到注册器中,但是响应不起作用,并且正文请求已发布到url中。我有一个使用相同索引文件的登录页面,并且该帖子正在起作用。我认为这可能与我的表单操作没有正确的路径有关。我确信即使作为起始页也可以收到帖子。
答案 0 :(得分:1)
问题是,您的form
以另一种形式嵌套,您应该将类signup_container
的形式更改为div
。
答案 1 :(得分:1)
您正在嵌套表格。这就是为什么它不起作用。每当嵌套表单时,子表单都会被忽略。在this page上,看到Content-model
,其中指出:
流内容,但没有表单元素后代。
您在页面上肯定可以有多种形式,但是它们是独立的。但是,有了一些聪明的javascript,您可能就能使它正常工作,但这将是不必要的,而且负担也很大。此外,它们可能仅在某些浏览器上起作用,并且在同一浏览器中,这些表格将在各个版本之间不兼容。
我想获得相同结果的另一种方法是使用HTML5中引入的form
属性。它使您可以通过使用其ID指向某种形式。此属性用于<input>
标记中。
注意:它不在<form> ... </form>
标记内,但仍是上述表单的一部分
这里是一个例子:
<form action="#" id="form1"></form> //outer form or parent form
<form action="#" id="form2"></form> //inner form or child form
<div> //for parent form
<input type="text" name="name1" form="form1">
<div> //for inner form
<input type="text" name="name2" form="form2">
<input type="submit" value="Submit" form="form2>
</div>
<input type="submit" value="Submit" form="form2">
</div>
您可以将此结构应用于自己的表单以解决问题。