英文:
Clicking on button in form doesnt do anything
问题
这是一个使用NodeJS创建的试验性登录界面。代码用于创建一个登录界面，但是提交按钮没有任何反应。这段代码缺少什么？按钮没有将用户导向我创建的仪表板界面。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%=title%></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<h1>LMS</h1>
<form>
<div class="text-center center-div " id="login">
<div class="container w-25 py-5">
<div class="title pb-5">
<h2 class="font-weight-bold">Login System</h2>
<span> Login for the existing user</span>
</div>
<form action="/route/login" method="post" class="pt-3">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" name="email" placeholder="email">
<small class="form-text text-muted text-left">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" name="password" placeholder="password">
</div>
<button type="submit" class="btn btn-success rounded-pill">Submit</button>
</form>
</div>
</div>
</form>
</body>
</html>
ROUTER JS
var express = require("express");
var router = express.Router();
const credentials = { email: "rnwit@gmail.com", password: "Chennai@123" };
// 登录
router.post('/login', (req, res) => {
if (req.body.email == credentials.email && req.body.password == credentials.password) {
req.session.user = req.body.email;
res.redirect("/route/dashboard");
} else {
res.end("Invalid username and password");
}
});
// 仪表板
router.get('/dashboard', (req, res) => {
if (req.session.user) {
res.render('/dashboard', { user: req.session.user });
} else {
res.send('Unauthorised user');
}
});
module.exports = router;
APP JS
const express = require("express");
const path = require("path");
const bodyparser = require("body-parser");
const session = require("express-session");
const { v4: uuidv4 } = require("uuid");
const router = require("./router");
const app = express();
const port = process.env.PORT || 8080;
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');
// 加载静态资源
app.use('/static', express.static(path.join(__dirname, 'public')));
app.use('/assets', express.static(path.join(__dirname, 'assets', 'images')));
app.use(session({
secret: uuidv4(),
resave: false,
saveUninitialized: true
}));
app.use('/route', router);
// 路由
app.get('/', (req, res) => {
res.render('base', { 'title': 'Login System' });
});
app.listen(port, () => { 'Listening on port 3000' });
请确保以下几点：
- 你的Node.js应用已经正确启动，并且没有报错。
- 你的路由配置正确，包括
/login和/dashboard的路径。 - 确保你的登录表单的提交按钮没有任何JavaScript代码或事件处理器来阻止其默认行为。
如果以上条件都满足，但问题仍然存在，可能需要检查浏览器的控制台是否有任何错误消息，以帮助进一步诊断问题。
英文:
This is a trial login screen using NodeJS.. The code is for a login screen but the submit button doesn't do anything. What does this code missing? The button doessnt direct to the dashboard screen i had created.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> <%=title%> </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="/static/style.css">
</head>
<body><h1> LMS</h1>
<form>
<div class="text-center center-div "id="login">
<div class="container w-25 py-5">
<div class="title pb-5">
<h2 class="font-weight-bold">Login System</h2>
<span> Login for the existing user</span>
</div>
<form action="/route/login" method="post" class="pt-3">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" name="email" placeholder="email">
<small class="form-text text-muted text-left">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" name="password" placeholder="password">
</div>
<button type="submit" class="btn btn-success rounded-pill">Submit</button>
</form>
</div>
</div>
</form>
</body>
</html>
ROUTER JS
var express=require("express");
var router=express.Router();
const credentials={email:"rnwit@gmail.com",password:"Chennai@123"}
//login
router.post('/login',(req,res)=>{
if (req.body.email==credentials.email && req.body.password==credentials.password){
req.session.user=req.body.email;
res.redirect("/route/dashboard");
//res.end("login successs");
}else{
res.end("Imvalid username and password");
}
});
//dashboard
router.get('/dashboard',(req,res)=>{
if(req.session.user){
res.render('/dashboard',{user:req.session.user})
}else{
res.send('Unauthorised user')
}
})
module.exports=router;
APP JS
const express = require("express");
const path=require("path");
const bodyparser=require("body-parser");
const session=require("express-session");
const {v4:uuidv4}=require("uuid");
const router=require("./router");
const app = express();
const port=process.env.PORT ||8080;
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({extended:true}));
app.set('view engine','ejs');
//LOAD STATIC ASSETS
app.use('/static',express.static(path.join(__dirname,'public')));
app.use('/assets',express.static(path.join(__dirname,'assets','images')));
app.use(session({
secret:uuidv4(),
resave:false,
saveUninitialized:true
}));
app.use('/route',router);
//ROUTE
app.get('/',(req,res)=>{
res.render('base',{'title':'Login System'})
})
app.listen(port,()=>{'Listening on port 3000'});
Could anyone check and say what is missing here and whay the form submit button would not work?
答案1
得分: 0
当我移除了外部表单时，它起作用了。谢谢。
英文:
As Teemu commented,(Nested forms are not allowed. Because of the invalid HTML, browsers strip the inner form and include all the form elements in the outer form, which in your case doesn't have action attribute. –
Teemu) when i removed the outer form, it worked. Thanks
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论