I'm trying to validate a contact form as the button is clicked.
I have window alerts to display when an input is empty, they are based in the html file.
This is a school project and I have to link to them from the js.file, but nothing shows up when the field is empty.
My html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Card Game</title>
<!-- Bootstrap style sheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"> <h1><i class="fa fa-gamepad" aria-hidden="true"></i> Card Game</h1></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li class="active">Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-sm-12">
<form id="signUpForm">
<h2>Contact us Form<h2>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<br>Name: <br>
<input type="text" name="firstName" id="firstName">
<span class="error" id="firstNameError">This field cannot be blank</span>
</div>
<div class="col-sm-12">
<br>Last Name: <br>
<input type="text" name="lastName" id="lastName">
<span class="error" id="lastNameError">This field cannot be blank</span>
</div>
<div class="col-sm-12">
<br>Telephone: <br>
<input type="text" name="phone" id="phone">
<span class="error" id="phoneError">Please enter a correct phone number</span>
</div>
<div class="col-sm-12">
<br>Email: <br>
<input type="text" name="email" id="email">
<span class="error" id="emailError">Please enter a correct email address</span>
</div>
<div class="col-sm-12">
<button type="submit" onclick="submit()" id="submitContact" class="m-t-30">Submit <i class="fa fa-paper-plane" aria-hidden="true"></i></button>
</div>
</form>
</div>
</div>
</section>
<footer>
Copyright <i class="fa fa-copyright" aria-hidden="true"></i> Noroff
</footer>
<script src="scripts/contact.js"></script>
</body>
</html>
My Javascript code:
var name = document.getElementById('firstName');
var lName = document.getElementById('lastName');
var phone = document.getElementById('phone');
var email = document.getElementById('email');
var validateForm = document.getElementById('submitContact');
var signUpForm = document.getElementById('signUpForm');
//Function that validates wether or not there is input on first and last name
function validateName(){
if (name.length == 0) {
window.alert(document.getElementById(firstNameError));
return false;
}
if (lName.length == 0) {
window.alert(document.getElementById(lastNameError));
return false;
}}
//Function for validating that there is input in the phone input, and that the input matches the phone value
function validatePhone() {
if(phone.length == 0){
window.alert(document.getElementById(phoneError));
return false;
}
if (phone.matches(/^(\+{1}\d{2,3}\s?[(]{1}\d{1,3}[)]{1}\s?\d+|\+\d{2,3}\s{1}\d+|\d+){1}[\s|-]?\d+([\s|-]?\d+){1,2}$/)){
window.alert(document.getElementById(phoneError));
}}
//Function for validating that there is input in the email, and that the email matches the email value
function validateEmail (){
if(email.length == 0){
window.alert(document.getElementById(emailError));
return false;
}
if (email.value == /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/) {
window.alert(document.getElementById(emailError));
return false;
}}
validateForm.addEventListener('click', function (event) {
signUpForm.submit();
});
Anyone who can help me?
Thanks
As far as I can see, there are two things that you are not doing correctly.
You are calling submit() directly, which you shouldn't. It's because you're tracking the click event listener at the bottom already. Remove the onclick and type="submit" part. It'll refresh the page if you have type="submit".
<button id="submitContact" class="m-t-30">Submit <i class="fa fa-paper-plane" aria-hidden="true"></i></button>
You're calling submit() in your event listener before validating the inputs.
validateForm.addEventListener('click', function (event) {
// TODO: Put your validation codes here.
signUpForm.submit();
});
Related
I have a login page where the user enters his username and password, when he submits this form the data is sent to php file for verifying the password.
For the first time when the user enters data (I entered wrong details) the page shows "Invalid password...please try again".
The second time when the user enters data (again I enter wrong details) the page just reloads. I am not able to understand why this is happening.
For more better understanding I have added a google drive link to a video showing the issue.
Link:Link to the video
The html code:
<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark padding ">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="assets/rv.png">
RV PUBLIC SCHOOL
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="admin.html">Admin Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<p align="center" class="lead">Get administrator access by entering correct details</p>
</div>
<div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;" >
<div class="row padding">
<div class="card border-dark" >
<div class="card-header" align="center">
<img src="assets/rv.png">
<h5>Admin Sign In</h5>
</div>
<div class="card-body" id="admin-signin-card">
<form id="admin-signin">
<div class="form-group">
<label>Username</label>
<input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label>Password</label>
<input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
</div>
<div class="form-group">
Forgot Password?
</div>
<div class="form-group" >
<input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
</div>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid padding">
<h1 align="center">About Us</h1>
<p align="center">I am Goutam B Seervi. A student of RVPS for the year 2015-18</p>
<h2 align="center">Contact me</h2>
<p align="center">Phone nnumber : 7019271367</p>
<p align="center">Email id : goutambseervi#gmail.com</p>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="js/admin_login_script.js"></script>
</html>
The javascript part:
$(document).ready(function () {
$("#admin-signin").submit(function (e) {
e.preventDefault();
let admin_username = $("#admin_username").val();
let admin_password = $("#admin_password").val();
$.ajax({
url: 'php_admin_login.php',
data: {
admin_username: admin_username,
admin_password: admin_password
},
type: "POST",
dataType: "json",
success: function (response) {
if (response === "OK") {
window.open("admin.html", "_self");
}
else {
document.getElementById('admin-signin-card').innerHTML += '<div class="alert alert-danger"><h5>Error occured...Please try again</h5></div>';
console.log("error shown");
}
}
});
});
});
I'm sure there is no problem with the php code so I'm not pasting here just to make the question more clearer.
If you need the whole code of the project you can get it here:Github link to the project
else {
document.getElementById('admin-signin-card').innerHTML += '<div class="alert …>';
Adding to an element’s .innerHTML replaces the whole content of the element; even the stuff that was already there will first be removed, and then re-created.
So your form itself is replaced with a new form, and therefor you completely lose your submit event handler you had attached to it as well.
Your attempts at preventing the default event action fail, because you handler function simply doesn’t get called any more at all, and just a normal form submit is performed now, which of course reloads the page.
You need to either add your event handler again after you replaced the parent container’s innerHTML - or use event delegation to begin with.
Try to use this. Hope it will help
$("form").submit(function(e){
e.preventDefault();
});
Kindly let me know if it does not work.
Try return false at the end of your $("#admin-signin").submit function instead of the preventDefault()
This is happening due to how you handle errors. By using document.getElementById('admin-signin-card').innerHTML += ... you are effectively reloading your form meaning that you lose the event listener. You can either adjust how you display the error or adjust the event listener.
I would recommend changing how you display the error.
I have removed the request in the example below but it's the same idea:
$(document).ready(function () {
$("#admin-signin").submit(function (e) {
e.preventDefault();
let admin_username = $("#admin_username").val();
let admin_password = $("#admin_password").val();
let response = "no";
if (response === "OK") {
window.open("admin.html", "_self");
} else {
document.getElementById('admin-signin-card-error').innerHTML ='<div class="alert alert-danger"><h5>Error occured...Please try again</h5></div>';
console.log("error shown");
}
});
});
<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark padding ">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="assets/rv.png"> RV PUBLIC SCHOOL
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="admin.html">Admin Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<p align="center" class="lead">Get administrator access by entering correct details</p>
</div>
<div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;">
<div class="row padding">
<div class="card border-dark">
<div class="card-header" align="center">
<img src="assets/rv.png">
<h5>Admin Sign In</h5>
</div>
<div class="card-body" id="admin-signin-card">
<form id="admin-signin">
<div class="form-group">
<label>Username</label>
<input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label>Password</label>
<input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
</div>
<div class="form-group">
Forgot Password?
</div>
<div class="form-group">
<input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
</div>
</form>
<div id="admin-signin-card-error"></div>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid padding">
<h1 align="center">About Us</h1>
<p align="center">I am Goutam B Seervi. A student of RVPS for the year 2015-18</p>
<h2 align="center">Contact me</h2>
<p align="center">Phone nnumber : 7019271367</p>
<p align="center">Email id : goutambseervi#gmail.com</p>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
</html>
like #CBroe mentioned, the problem is caused by innerHTML.
i moved the content of innerHTML to the form, and give it display none, when there an error i show the error with .show()
i changed the ajax url and data Type for testing purpose.
$(document).ready(function () {
$("#admin-signin").on('submit', function (event) {
event.preventDefault();
let admin_username = $("#admin_username").val();
let admin_password = $("#admin_password").val();
$.ajax({
url: 'https://jsonp.afeld.me/?url=https://jsonview.com/example.json',
type: "POST",
dataType: "jsonp",
data: {
admin_username: admin_username,
admin_password: admin_password
},
success: function (response) {
if (response === "OK") {
window.open("admin.html", "_self");
} else {
$('.alert.alert-danger').show();
console.log("error shown");
}
}
});
});
});
<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;" >
<div class="row padding">
<div class="card border-dark" >
<div class="card-header" align="center">
<h5>Admin Sign In</h5>
</div>
<div class="card-body" id="admin-signin-card">
<form id="admin-signin">
<div class="form-group">
<label>Username</label>
<input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label>Password</label>
<input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
</div>
<div class="form-group">
Forgot Password?
</div>
<div class="form-group" >
<input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
</div>
<div class="alert alert-danger" style="display: none;"><h5>Error occured...Please try again</h5></div>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
</body>
</html>
I'm working on a NodeJS Project that uses Sails.js as a framework.
What I'm trying to accomplish is a permissions system where the permissions per group are set by Check Boxes, I'm using a typical form with AngularJS.
When I click my "Sumbit" button it throws this error at my Browser's console:
angular.1.3.js:11594 TypeError: Cannot read property '0' of null
at $parseFunctionCall (angular.1.3.js:12333)
at callback (angular.1.3.js:22949)
at Scope.$eval (angular.1.3.js:14383)
at Scope.$apply (angular.1.3.js:14482)
at HTMLFormElement.<anonymous> (angular.1.3.js:22954)
at HTMLFormElement.eventHandler (angular.1.3.js:3011)(anonymous function) # angular.1.3.js:11594
Any help with this would be greatly appreciated.
EDIT Forgot the Code:
Here is the code that receives the information POSTed from the form
createGroup: function(req, res) {
Groups.create({
groupName: req.param('groupName'),
canViewUsers: req.param('canViewUsers'),
canEditUsers: req.param('canEditUsers'),
canPromoteToStaff: req.param('canPromoteToStaff'),
canViewNotes: req.param('canViewNotes'),
canEditPermissions: req.param('canEditPermissions')
});
Here is the code for that catches the information and POSTs it to the create function
angular.module('GroupsModule').controller('GroupsController', ['$scope', '$http', 'toastr', function($scope, $http, toastr) {
$scope.createGroup = {
loading: false
};
$scope.createGroupForm = function(){
// Set the loading state (i.e. show loading spinner)
$scope.createGroup.loading = true;
// Submit request to Sails.
$http.post('/createGroup', {
groupName: $scope.createGroupForm.groupName,
canViewUsers: $scope.createGroupForm.canViewUsers,
canEditUsers: $scope.createGroupForm.canEditUsers,
canPromoteToStaff: $scope.createGroupForm.canPromoteToStaff,
canViewNotes: $scope.createGroupForm.canViewNotes,
canEditPermissions: $scope.createGroupForm.canEditPermissions
})
.then(function onSuccess(sailsResponse){
window.location = '/groups';
})
.catch(function onError(sailsResponse){
// Handle known error type(s).
// If using sails-disk adpater -- Handle Duplicate Key
var groupAlreadyExists = sailsResponse.status == 409;
if (groupAlreadyExists) {
toastr.error('That group already exists', 'Error');
}
})
.finally(function eitherWay(){
$scope.createGroup.loading = false;
})
There are closing brackets but they aren't getting formatted correctly in the post.
And finally here is the code for the Form itself:
<!--STYLES-->
<link rel="stylesheet" href="/styles/angular-toastr.css">
<link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/theme.css">
<link rel="stylesheet" href="/styles/theme.min.css">
<!--STYLES END-->
<body ng-app="DashboardModule" ng-controller="DashboardController" ng-cloak>
<div class="bs-docs-section clearfix">
<div class="row">
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Insomnia eSports</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-users" aria-hidden="true"></i> Group Management </li>
</ul>
<!--
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
-->
<ul class="nav navbar-nav navbar-right">
<li>Sign Out</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<form ng-submit="createGroupForm()" id="create-group-form" class="form-signin" name="createGroupForm">
<h2 class="form-signin-heading">Create an account</h2>
<div class="row">
<!-- Group Name -->
<label>Group Name</label>
<input type="text" class="form-control" placeholder="Group Name" name="groupName" ng-model="createGroupForm.name" ng-maxlength="25" required>
</div>
<!-- Can View Users -->
<label>View Users?</label>
<input type="checkbox" name="canViewUsers" ng-model="canViewUsers.value">
<!-- Can View Users -->
<label>Edit Users?</label>
<input type="checkbox" name="canEditUsers" ng-model="canEditUsers.value">
<!-- Can Promote To Staff -->
<label>Promote to Staff?</label>
<input type="checkbox" name="canPromoteToStaff" ng-model="canPromoteToStaff.value">
<!-- Can Promote To Staff -->
<label>Can view notes?</label>
<input type="checkbox" name="canViewNotes" ng-model="canViewNotes.value">
<!-- Can Promote To Staff -->
<label>Can edit permissions?</label>
<input type="checkbox" name="canEditPermissions" ng-model="canEditPermissions.value">
<br/>
<!-- Disable signup button until the form has no errors -->
<button class="btn btn-success btn-lg btn-block" type="submit" ng-disabled="createGroupForm.$invalid">
<span ng-show="!createGroupForm.loading">Create Group</span>
<span class="overlord-loading-spinner fa fa-spinner" ng-show="createGroupForm.loading" ></span>
<span ng-show="createGroupForm.loading">Preparing your new group...</span>
</button>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.1.3.js"></script>
<script src="/js/dependencies/Base64.js"></script>
<script src="/js/dependencies/angular-toastr.js"></script>
<script src="/js/dependencies/compareTo.module.js"></script>
<script src="/js/public/signup/SignupModule.js"></script>
<script src="/js/public/groups/GroupsModule.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/public/homepage/HomepageModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
<script src="/js/public/groups/GroupsController.js"></script>
<script src="/js/public/homepage/HomepageController.js"></script>
<script src="/js/public/signup/SignupController.js"></script>
<!--SCRIPTS END-->
</body>
This was solved by me incorrectly using $scope on createGroupForm instead of just createGroup. The corrected code bit is below:
Instead of:
$scope.createGroupForm.canViewUsers
Use:
$scope.createGroup.canViewUsers
I can't change the status data on my Firebase project with the HTML site and using javascript (.js) to connect with my Firebase project. I've made checkbox to change the status data on Firebase. But it can't change the data value on Firebase. I've change id checkbox, but there is no result. Anyone please help me. I am newbie. This is my HTML code
<!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">
<meta name="description">
<meta name="author">
<title>
Web Kontrol
</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <link href="assets/css/style.css" rel="stylesheet"> -->
<link href="assets/css/sh-default.css" rel="stylesheet" default-stylesheet="true" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body style="cursor: auto;">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a class="navbar-brand" href>Web Kontrol Lampu</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>
<a data-target="#login" href>Login</a>
</li>
<!--<li>
<a data-target="#register" href>Signup</a>
</li>-->
<li>
<a data-target="#lists" href>Control</a>
</li>
<li>
<a id="logout" href>Logout</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="welcome"></div>
<div class="container tab default" id="login">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">
<em class="stackhive-marker"></em>Login to Your Account
</h2>
<hr>
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="login-email"><input type="password" class="form-control" placeholder="Password"
required="" id="login-password">
<button class="btn btn-primary" type="button" id="login-btn">
Login
</button>
<hr>
<div class="status alert alert-info hide"></div>
</form>
</div>
<div class="container tab hide" id="register">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">
Daftar Akun Baru
</h2>
<hr>
<input type="text" class="form-control" placeholder="Your Name" required="" autofocus="" id="name"><input type="email" class="form-control" placeholder="Email address" required=""
autofocus="" id="email"><input type="password" class="form-control" placeholder="Password" required="" id="password">
<button class="btn btn-primary" type="button" id="signup-btn">
Masuk !
</button>
</form>
<hr>
<div class="status alert alert-info hide"></div>
</div>
<div class="container tab hide" id="lists">
<div class="status alert alert-info hide"></div><br>
<h1>Kontrol Lampu</h1>
<div align="center">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round-1" type="checkbox">
<input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round-2" type="checkbox">
</div><!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="./firebasefunctions.js"></script>
<script type="text/javascript" src="./script.js"></script>
<!-- <script type="text/javascript" src="./script-coba.js"></script> -->
</body>
And this .js file
$(document).ready(function() {
//this URL to my FIrebase project
var ref = new Firebase("https://firesmartlamp.firebaseio.com/devices/smartlamp/parameters/");
/*****************************************************************
Get the status on Firebase
******************************************************************/
ref.once("value", function(res) {
var status = res.child("state").val(); //state is my data on Firebase
$('#cmn-toggle-1').attr('checked', status); //cmn-toggle-1 is my checkbox id
console.log("Statusnya: " +status)
});
ref.once("value", function(res) {
var status2 = res.child("state2").val();
$('#cmn-toggle-2').attr('checked', status);
console.log("Statusnya: " +status2)
});
/*****************************************************************
Sync to firebase
******************************************************************/
ref.on("child_changed", function(res) {
var states = res.val();
$('#cmn-toggle-1').prop('checked', states);
console.log("Cek: " +states)
});
ref.on("child_changed", function(res) {
var states2 = res.val();
$('#cmn-toggle-2').prop('checked', states2);
console.log("Cek: " +states2)
});
/*****************************************************************
Update value, changed status of Switch
******************************************************************/
$('#cmn-toggle-1').on('change', function(){
if(this.checked)
{
console.log("On")
ref.update({ state: true }); //true and false are value of data on Firebase
}
else{
console.log("Off")
ref.update({ state: false });
}
});
$('#cmn-toggle-2').on('change', function(){
if(this.checked)
{
console.log("On")
ref.update({ state2: true });
}
else{
console.log("Off")
ref.update({ state2: false });
}
});
});
You're mixing all kinds of data access patterns, so I cleaned those up in your jsbin and made it work. The reading from Firebase is now simply:
/*****************************************************************
Sync with firebase
******************************************************************/
ref.child("state").on("value", function(res) {
var states = res.val();
$('#cmn-toggle-1').prop('checked', states);
});
ref.child("state2").on("value", function(res) {
var states2 = res.val();
$('#cmn-toggle-2').prop('checked', states2);
});
So we have the two state properties (state and state2) and attach a value listener to each. That means the callbacks will be invoked "immediately" with the current value and then once whenever the property changes.
I want to hide login and sign up box and button after user login. I have tried but it won't work. Here are my codes
header.php
<!DOCTYPE HTML>
<html>
<head>
<title>My Play a Entertainment Category Flat Bootstrap Responsive Website Template | Home :: w3layouts</title>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<link href="css/dashboard.css" rel="stylesheet">
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="js/jquery-1.11.1.min.js"></script>
<!--start-smoth-scrolling-->
</head>
<body>
<?php
session_start();
if(!isset($_SESSION["sess_email"])){
?>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><h1><img src="images/logo.png" alt="" /></h1></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="top-search">
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
<input type="submit" value=" ">
</form>
</div>
<div class="header-top-right">
<div class="file">
Upload
</div>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><h1><img src="images/logo.png" alt="" /></h1></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="top-search">
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
<input type="submit" value=" ">
</form>
</div>
<div class="header-top-right">
<div class="file">
Upload
</div>
<div class="signin">
Sign Up
<!-- pop-up-box -->
<script type="text/javascript" src="js/modernizr.custom.min.js"></script>
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<!--//pop-up-box -->
<div id="small-dialog2" class="mfp-hide">
<h3>Create Account</h3>
<div class="social-sits">
<div class="facebook-button">
Connect with Facebook
</div>
<div class="chrome-button">
Connect with Google
</div>
<div class="button-bottom">
<p>Already have an account? Login</p>
</div>
</div>
<div class="signup">
<form action="addnewuser.php" " method="post">
<input type="text" name="username" class="email" placeholder="username" autocomplete="off"/>
<input type="text" name="email" class="email" placeholder="Email" required="required" pattern="([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?" title="Enter a valid email"/>
<input type="password" name="password" required="required" pattern=".{6,}" title="Minimum 6 characters required" autocomplete="off"/>
<input type="text" name="mnumber" class="email" placeholder="Mobile Number" maxlength="10" pattern="[1-9]{1}\d{9}" title="Enter a valid mobile number" />
<br><input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
<br>
<input type="submit" value="Signup" name="submit" />
</form>
</div>
<div class="clearfix"> </div>
</div>
<script>
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
</script>
</div>
<div class="signin">
Sign In
<div id="small-dialog" class="mfp-hide">
<h3>Login</h3>
<div class="social-sits">
<div class="facebook-button">
Connect with Facebook
</div>
<div class="chrome-button">
Connect with Google
</div>
<div class="button-bottom">
<p>New account? Signup</p>
</div>
</div>
<div class="signup">
<form action="login1.php" method="post">
<input type="text" name="email" class="email" placeholder="Email" required="required" pattern="([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?" title="Enter a valid email"/>
<input type="password" name="password" required="required" pattern=".{6,}" title="Minimum 6 characters required" autocomplete="off"/>
<input type="submit" value="Login" name="submit" />
</form>
<div class="forgot">
Forgot password ?
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</nav>
<?php } else { ?>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><h1><img src="images/logo.png" alt="" /></h1></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="top-search">
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
<input type="submit" value=" ">
</form>
</div>
<div class="header-top-right">
<div class="file">
Upload
</div>
<?=$_SESSION['sess_email'];?>Logout
<?php
}
?>
index.php
<?php include 'includes/header.php';?>
<!-- /header -->
<div class="col-sm-3 col-md-2 sidebar">
<div class="top-navigation">
<div class="t-menu">MENU</div>
<div class="t-img">
<img src="images/lines.png" alt="" />
</div>
<div class="clearfix"> </div>
</div>
<div class="drop-navigation drop-navigation">
<ul class="nav nav-sidebar">
<li class="active"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>Home</li>
<li><span class="glyphicon glyphicon-home glyphicon-blackboard" aria-hidden="true"></span>TV Shows</li>
<li><span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>History</li>
<li><span class="glyphicon glyphicon-film" aria-hidden="true"></span>Movies<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></li>
<ul class="cl-effect-2">
<li>English</li>
<li>Chinese</li>
<li>Hindi</li>
</ul>
<!-- script-for-menu -->
<script>
$( "li a.menu1" ).click(function() {
$( "ul.cl-effect-2" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<li><span class="glyphicon glyphicon-film glyphicon-king" aria-hidden="true"></span>Sports<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></li>
<ul class="cl-effect-1">
<li>Football</li>
<li>Cricket</li>
<li>Tennis</li>
<li>Shattil</li>
</ul>
<!-- script-for-menu -->
<script>
$( "li a.menu" ).click(function() {
$( "ul.cl-effect-1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<li><span class="glyphicon glyphicon-music" aria-hidden="true"></span>Songs</li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>News</li>
</ul>
<!-- script-for-menu -->
<script>
$( ".top-navigation" ).click(function() {
$( ".drop-navigation" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<div class="side-bottom">
<div class="side-bottom-icons">
<ul class="nav2">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<?php include 'includes/footer.php';?>
login.php
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['email']) && !empty($_POST['password'])) {
$email=$_POST['email'];
$password=$_POST['password'];
$con=mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db('site1') or die("cannot select DB");
$query=mysql_query("SELECT * FROM user WHERE email='".$email."' AND password='".$password."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbemail=$row['email'];
$dbpassword=$row['password'];
}
if($email == $dbemail && $password == $dbpassword)
{
session_start();
$_SESSION['sess_email']=$email;
/* Redirect browser */
header("Location: index.php");
}
} else {
echo "Invalid email or password!";
}
} else {
echo "All fields are required!";
}
}
?>
There is something with your session_start(). These need to be on top of each file you are using the session handler. If you don't put session_start() on top, the headers won't be sent to the browser.
So your files would look like:
Header.php
<?php
session_start(); # This need to be on top, when using sessions!
?>
<!DOCTYPE HTML>
<html>
<head>
Login.php
<?php
session_start(); # This need to be on top, when using sessions!
if(isset($_POST["submit"])){
In headers.php check if $_SESSION['sess_email'] variable is not empty. If empty then display the login button.
start at the top of your page with
<?php
session_start();
//after you started the session create the rest of your page
?>
<!DOCTYPE HTML>
<html>
<head>
then at login.php you , again, start with
<?php
session_start();
at the top of your page
then create a if statement:
if(isset($_POST["submit"])){
//disable the login / signup button(s) here
//for example:
$logged_in = true;
} else $logged_in = false;
then create a jQuery function like this:
<script>
var logged_in = '<?php echo $logged_in ; ?>';
if(logged_in === "true") {
$(".signin").hide();
} else {
$(".signin").show();
}
</script>
or in javascript
<script>
var logged_in = '<?php echo $logged_in ; ?>';
if(logged_in === "true") {
document.getElementsByClassName("signin").style.visibility = "hidden";
} else {
document.getElementsByClassName("signin").style.visibility = "visible";
}
</script>
In my ajax i have a var named ajax for some reason when I run ajax.respondText.
In the php code I ask it to return the username of the one log in. Well it is echoing out the name of the user but is also echoing of the header of my website in the mix as you can see here - Andrew at the bottom of the first set of code. That is the only thing that should be echoed out not the html that is ahead it.
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Better Gamerz United</title>
<link rel="icon" href="http://www.bettergamerzunited.com/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="http://www.bettergamerzunited.com/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a title="" class="navbar-brand " href="index.php">
<img src="img/BGU Logo.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Recrutment</li>
<li>Servers</li>
<li>Forums</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-link" href="login.php">Login</a></li>
<li><a class="navbar-link" class="navbar-link"class="navbar-link" href="signup.php">Register</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-->
</nav>
</header>
Andrew
What could cause my header to be included in to my response so I did went alittle deeper and ran a console.log just the var ajax. which provided me this
XMLHttpRequest {statusText: "OK", status: 200, responseURL: "http://www.bettergamerzunited.com/login.php", response: "<DOCTYPE html>↵<html>↵<head>↵ <meta charset="UTF-8…iv><!-- /.container-->↵ </nav>↵</header>↵↵ Andrew", responseType: ""…}onabort: nullonerror: nullonload: nullonloadend: nullonloadstart: nullonprogress: nullonreadystatechange: function () {ontimeout: nullreadyState: 4response: "<DOCTYPE html>↵<html>↵<head>↵ <meta charset="UTF-8">↵ <title>Better Gamerz United</title>↵ <link rel="icon" href="http://www.bettergamerzunited.com/favicon.ico" type="image/x-icon"/>↵ <link rel="shortcut icon" href="http://www.bettergamerzunited.com/favicon.ico" type="image/x-icon"/>↵ <link rel="stylesheet" href="css/bootstrap.css">↵ <link rel="stylesheet" href="css/main.css">↵</head>↵<body>↵ <header>↵ <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">↵ <div class="container">↵ <!-- Brand and toggle get grouped for better mobile display -->↵ <div class="navbar-header">↵ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">↵ <span class="sr-only">Toggle navigation</span>↵ <span class="icon-bar"></span>↵ <span class="icon-bar"></span>↵ <span class="icon-bar"></span>↵ </button>↵ <a title="" class="navbar-brand " href="index.php">↵ <img src="img/BGU Logo.png" />↵ </a>↵ </div>↵↵ <!-- Collect the nav links, forms, and other content for toggling -->↵ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">↵ <ul class="nav navbar-nav">↵ <li class="active">Home</li>↵ <li>Recrutment</li>↵ <li>Servers</li>↵ <li>Forums</li>↵ <li>Contact Us</li>↵ </ul>↵ <ul class="nav navbar-nav navbar-right">↵ <li><a class="navbar-link" href="login.php">Login</a></li>↵<li><a class="navbar-link" class="navbar-link"class="navbar-link" href="signup.php">Register</a></li>↵↵ </ul>↵ </div><!-- /.navbar-collapse -->↵ </div><!-- /.container-->↵ </nav>↵</header>↵↵ Andrew"responseText: "<DOCTYPE html>↵<html>↵<head>↵ <meta charset="UTF-8">↵ <title>Better Gamerz United</title>↵ <link rel="icon" href="http://www.bettergamerzunited.com/favicon.ico" type="image/x-icon"/>↵ <link rel="shortcut icon" href="http://www.bettergamerzunited.com/favicon.ico" type="image/x-icon"/>↵ <link rel="stylesheet" href="css/bootstrap.css">↵ <link rel="stylesheet" href="css/main.css">↵</head>↵<body>↵ <header>↵ <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">↵ <div class="container">↵ <!-- Brand and toggle get grouped for better mobile display -->↵ <div class="navbar-header">↵ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">↵ <span class="sr-only">Toggle navigation</span>↵ <span class="icon-bar"></span>↵ <span class="icon-bar"></span>↵ <span class="icon-bar"></span>↵ </button>↵ <a title="" class="navbar-brand " href="index.php">↵ <img src="img/BGU Logo.png" />↵ </a>↵ </div>↵↵ <!-- Collect the nav links, forms, and other content for toggling -->↵ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">↵ <ul class="nav navbar-nav">↵ <li class="active">Home</li>↵ <li>Recrutment</li>↵ <li>Servers</li>↵ <li>Forums</li>↵ <li>Contact Us</li>↵ </ul>↵ <ul class="nav navbar-nav navbar-right">↵ <li><a class="navbar-link" href="login.php">Login</a></li>↵<li><a class="navbar-link" class="navbar-link"class="navbar-link" href="signup.php">Register</a></li>↵↵ </ul>↵ </div><!-- /.navbar-collapse -->↵ </div><!-- /.container-->↵ </nav>↵</header>↵↵ Andrew"responseType: ""responseURL: "http://www.bettergamerzunited.com/login.php"responseXML: nullstatus: 200statusText: "OK"timeout: 0upload: XMLHttpRequestUploadwithCredentials: false__proto__: XMLHttpRequest
Which the response is my header.
What I am asking is to please view my code below and trying to help me understand why this is happening. I'm confused and I have tried everything that I can to fix it.
File WIth Problem
<?php
include 'core/init.php';
include 'includes/overall/header.php';
// If user is already logged in, header that weenis away
if($user_ok == true){
header("location: user.php?u=".$_SESSION["username"]);
exit();
}
// AJAX CALLS THIS LOGIN CODE TO EXECUTE
if(isset($_POST["e"])){
// GATHER THE POSTED DATA INTO LOCAL VARIABLES AND SANITIZE
$e = mysqli_real_escape_string($mysqli, $_POST['e']);
$p = md5($_POST['p']);
// GET USER IP ADDRESS
$ip = preg_replace('#[^0-9.]#', '', getenv('REMOTE_ADDR'));
// FORM DATA ERROR HANDLING
if($e == "" || $p == ""){
echo "login_failed";
exit();
} else {
// END FORM DATA ERROR HANDLING
$sql = "SELECT id, username, password FROM users WHERE email='$e' AND activated='1' LIMIT 1";
$query = mysqli_query($mysqli, $sql);
$row = mysqli_fetch_row($query);
$db_id = $row[0];
$db_username = $row[1];
$db_pass_str = $row[2];
if($p != $db_pass_str){
echo "login_failed";
exit();
} else {
// CREATE THEIR SESSIONS AND COOKIES
$_SESSION['userid'] = $db_id;
$_SESSION['username'] = $db_username;
$_SESSION['password'] = $db_pass_str;
setcookie("id", $db_id, strtotime( '+30 days' ), "/", "", "", TRUE);
setcookie("user", $db_username, strtotime( '+30 days' ), "/", "", "", TRUE);
setcookie("pass", $db_pass_str, strtotime( '+30 days' ), "/", "", "", TRUE);
// UPDATE THEIR "IP" AND "LASTLOGIN" FIELDS
$sql = "UPDATE users SET ip='$ip', lastlogin=now() WHERE username='$db_username' LIMIT 1";
$query = mysqli_query($mysqli, $sql);
echo $db_username;
exit();
}
}
exit();
}
?>
<script>
function emptyElement(x){
_(x).innerHTML = "";
}
function login(){
var e = _("email").value;
var p = _("password").value;
var status = _("status");
if(e == "" || p == ""){
status.innerHTML = "Fill out all of the form data";
} else {
_("loginbtn").style.display = "none";
status.innerHTML = 'please wait ...';
var ajax = ajaxObj("POST", "login.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
if(ajax.responseText == "login_failed"){
status.innerHTML = "Login unsuccessful, please try again.";
_("loginbtn").style.display = "block";
} else {
console.log(ajax.responseText); //debugging use
window.location = "user.php?u="+ajax.responseText; // This is where the header is being added. I need the word anderw here with out my header being included.
}
}
}
ajax.send("e="+e+"&p="+p);
}
}
</script>
<html>
<div class="container background">
<p class="heading-title">Log In</p>
<form id="loginform" class="form-horizontal" onsubmit="return false">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email Address</label>
<div class="col-sm-10">
<input type="test"10 name="email" onfocus="emptyElement('status')" maxlength="88" class="form-control" id="email" value="" autocomplete="off" placeholder="Please enter your email">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" name="password" onfocus="emptyElement('status')" maxlength="16" class="form-control" id="password" value="" autocomplete="off" placeholder="Please enter your password">
<li class=""><a class="navbar-link" href="#">Forgot your password?</a></li>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 ">
<span class='pull-right text-danger' id="status"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="loginbtn" onclick="login()" class="btn btn-primary pull-right">Log In</button><br><br>
</div>
</div>
</form>
</div>
</html>
<?php
include 'includes/overall/footer.php';
?>
This is coming from either of the following two includes at the top of your php script:
include 'core/init.php';
include 'includes/overall/header.php';
So restrict the unwanted output or file inclusion in time of an ajax call.