I'm not well in javascript and css. I'm trying to create login page using template whish is using mdbootstrap. but when i click on "let's go" button i get an error. I searched for this on the internet. but I couldn't find a solution.
This is my page:
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="<?php echo base_url() ?>assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="<?php echo base_url() ?>assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
Student Management | Login
</title>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- CSS Files -->
<link href="<?php echo base_url() ?>assets/css/material-dashboard.minf066.css?v=2.1.0" rel="stylesheet" />
<!-- pnotify css -->
<link href="<?php echo base_url() ?>assets/pnotifyjs/node_modules/pnotify/dist/PNotifyBrightTheme.css" rel="stylesheet" type="text/css" />
<!-- material icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
</head>
<body class="off-canvas-sidebar">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top text-white">
<div class="container">
<div class="navbar-wrapper">
<a class="navbar-brand" href="#pablo">Login Page</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item active ">
<a href="<?php echo base_url() ?>view_controller/login" class="nav-link">
<i class="material-icons">fingerprint</i> Login
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="wrapper wrapper-full-page">
<div class="page-header login-page header-filter" filter-color="white" style="background-image: url('<?php echo base_url() ?>assets/img/login.jpg'); background-size: cover; background-position: top center;">
<!-- you can change the color of the filter page using: data-color="blue | purple | green | orange | red | rose " -->
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-8 ml-auto mr-auto">
<form class="form" method="post" action="<?php echo base_url() ?>user_controller/user_login">
<div class="card card-login card-hidden">
<div class="card-header card-header-rose text-center">
<h4 class="card-title">Login</h4>
</div>
<div class="card-body ">
<p class="card-description text-center">Or Be Classical</p>
<span class="bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">email</i>
</span>
</div>
<input type="email" id="inputEmail" class="form-control" placeholder="Email...">
<div id="statusEmail"></div>
</div>
</span>
<span class="bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">lock_outline</i>
</span>
</div>
<input type="password" id="inputPassword" class="form-control" placeholder="Password...">
<div id="statusPassword"></div>
</div>
</span>
</div>
<div class="card-footer justify-content-center">
<a href="" id = "submitButton" class="btn btn-rose btn-link btn-lg">Lets Go</a>
</div>
</div>
</form>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="copyright float-right">
©
<script>
document.write(new Date().getFullYear())
</script>, made with <i class="material-icons">favorite</i> by
<a href="http://www.prox.lk" target="_blank">Pro-X Technologies</a> in Sri Lanka.
</div>
</div>
</footer>
</div>
</div>
<input type="hidden" value="<?php echo base_url()?>" id="baseUrl">
<!-- Core JS Files -->
<script src="<?php echo base_url() ?>assets/js/core/jquery.min.js"></script>
<script src="<?php echo base_url() ?>assets/js/core/popper.min.js"></script>
<script src="<?php echo base_url() ?>assets/js/core/bootstrap-material-design.min.js"></script>
<script src="<?php echo base_url() ?>assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Notifications Plugin -->
<script src="<?php echo base_url() ?>assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="<?php echo base_url() ?>assets/js/material-dashboard.minf066.js?v=2.1.0" type="text/javascript"></script>
<script>
$(document).ready(function() {
md.checkFullPageBackgroundImage();
setTimeout(function() {
// after 1000 ms we add the class animated to the login/register card
$('.card').removeClass('card-hidden');
}, 700);
});
</script>
<!-- custom javascript ----- login page.js -->
<script src="<?php echo base_url() ?>assets/js/customjs/login.js" type="text/javascript"></script>
<!-- pnotify js -->
<script type="text/javascript" src="<?php echo base_url() ?>assets/pnotifyjs/node_modules/pnotify/dist/iife/PNotify.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/pnotifyjs/node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>
</body>
</html>
This is my external js file
$(document).on('click','#submitButton',function(e){
e.preventDefault();
let password = document.getElementById('inputPassword');
let email = document.getElementById('inputEmail');
let endpoint = document.getElementById('baseUrl')+'user_controller/user_login';
$.ajax({
url:endpoint,
type:'post',
dataType:'json',
data:{
email:email,
password:password
},
success:function (response) {
document.getElementById('inputEmail').classList.remove("is-valid");
document.getElementById('inputEmail').classList.remove("is-invalid");
document.getElementById('statusEmail').classList.remove("valid-feedback");
document.getElementById('statusEmail').classList.remove("invalid-feedback");
document.getElementById('inputPassword').classList.remove("is-valid");
document.getElementById('inputPassword').classList.remove("is-invalid");
document.getElementById('statusPassword').classList.remove("valid-feedback");
document.getElementById('statusPassword').classList.remove("invalid-feedback");
if (response.form_err) {
let form_err = response.form_err;
if (form_err.email == "") {
document.getElementById('inputEmail').classList.add("is-valid");
document.getElementById('statusEmail').classList.add("valid-feedback");
document.getElementById('statusEmail').innerHTML = "Email is valid.";
} else {
document.getElementById('inputEmail').classList.add("is-invalid");
document.getElementById('statusEmail').classList.add("invalid-feedback");
document.getElementById('statusEmail').innerHTML = form_err.email;
}
if (form_error.password == "") {
document.getElementById('inputPassword').classList.add("is-valid");
document.getElementById('statusPassword').classList.add("valid-feedback");
document.getElementById('statusPassword').innerHTML = "Password is correct.";
} else {
document.getElementById('inputPassword').classList.add("is-invalid");
document.getElementById('statusPassword').classList.add("invalid-feedback");
document.getElementById('statusPassword').innerHTML = form_err.password;
}
} else if (response == true) {
// PNotify.success({
// title: 'Success!',
// text: 'Now you will redirected to the admin panel.'
// });
}
},
error: function (err) {
// console.log(err);
// PNotify.error({
// title: 'Oh No!',
// text: 'Something terrible happened.'
// });
}
});
});
When i click on the lets go button get error like this:
bootstrap-material-design.min.js:1 Uncaught TypeError: Cannot read property 'which' of undefined
at Object.isChar (bootstrap-material-design.min.js:1)
at bootstrap-material-design.min.js:1
at e (jquery.min.js:2702)
at Ab (jquery.min.js:2695)
at Ab (jquery.min.js:2697)
at Object.<anonymous> (jquery.min.js:2693)
at Function.each (jquery.min.js:128)
at Ab (jquery.min.js:2692)
at Ab (jquery.min.js:2697)
at Ab (jquery.min.js:2697)
How i solve this error? I couldn't find a solution form googling this.
