First your code has alot of flops.
1.) You are saving password as plaintext, you will need to hash your password using php default password hashing mechanism.
2.) Your code is vulnerable to session Fixation attack. You can mitigate that using session regenerate_id as below
session_regenerate_id();
I will add it at your php script
3.) Session hijacking can only be prevented by ensuring that your site runs under https and not just http
4.) You are passing session username without sing htmlentities or htmlspecialchars functions.
Remember to do that when displaying session username on welcomepage.php
To answer your question, You can do that with Jquery/Ajax.
In the code below, am submitting your form using signin id attributes as can be seen in the jquery/ajax code below.
The code below displays all the actions triggered by the ajax/jquerycode
<div id="loader"></div>
<div id="result"></div>
Remember to include jquery.min.js files to ensure that it works
so here is your login.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#signin').click(function(){
var username = $('#username').val();
var password = $('#password').val();
if(username==""){
alert('please Enter username');
}
else if(password==""){
alert('please Enter password');
}
else{
$('#loader').fadeIn(400).html('<span>Please Wait, User is being logged</span>');
var datasend = "username="+ username + "&password=" + password;
$.ajax({
type:'POST',
url:'login.php',
data:datasend,
crossDomain: true,
cache:false,
success:function(msg){
//empty username and password box after submission
$('#username').val('');
$('#password').val('');
$('#loader').hide();
$('#result').fadeIn('slow').prepend(msg);
}
});
}
})
});
</script>
<form action="" method="POST">
<div class="form-group mb-lg">
<label>Username</label>
<div class="input-group input-group-icon">
<input
name="username"
type="text"
class="form-control input-lg"
id="username"
/>
<span class="input-group-addon">
<span class="icon icon-lg">
<i class="fa fa-user"></i>
</span>
</span>
</div>
</div>
<div class="form-group mb-lg">
<div class="clearfix">
<label class="pull-left">Password</label>
<a href="#" class="pull-right">Lost Password?</a>
</div>
<div class="input-group input-group-icon">
<input
name="pwd"
type="password"
class="form-control input-lg"
id="password"
/>
<span class="input-group-addon">
<span class="icon icon-lg">
<i class="fa fa-lock"></i>
</span>
</span>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="checkbox-custom checkbox-default">
<input id="RememberMe" name="rememberme" type="checkbox" />
<label for="RememberMe">Remember Me</label>
</div>
</div>
<div class="col-sm-4 text-right">
<div id="loader"></div>
<div id="result"></div>
<div id="fadeoutResult"></div>
<button type="submit" class="btn btn-primary hidden-xs" id="signin">
Sign In
</button>
<button
type="submit"
class="btn btn-primary btn-block btn-lg visible-xs mt-lg"
id="signin1"
>
Sign In
</button>
</div>
</div>
<p class="text-center">
Don't have an account yet? <a href="#">Sign Up!</a>
</p>
</form>
login.php
<?php
include("php_functions/config.php");
session_start();
if($_SERVER["REQUEST_METHOD"] == "POST") {
// username and password sent from form
$myusername = mysqli_real_escape_string($db,$_POST['username']);
$mypassword = mysqli_real_escape_string($db,$_POST['password']);
$sql = "SELECT user_id FROM user WHERE username = '$myusername' and password = '$mypassword'";
$result = mysqli_query($db,$sql);
$rows = mysqli_fetch_array($result);
$count = mysqli_num_rows($result);
// If result matched $myusername and $mypassword, table row must be 1 row
if($count == 1) {
//prevent session fixation attack
session_regenerate_id();
$_SESSION['login_user'] = $myusername;
header("location: .php");
} else {
echo '<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>',
echo '<script type="text/javascript">',
echo 'setTimeout(function () { swal("Oops!","Your Account Credentials is Invalid, Please Try Again!","error");',
echo '}, 100);</script>';
}
}
?>
Finally, in case if the form does not get submitted, you can remove just tis two the form elements
<form> </form> and it will work
Updated section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#signin').click(function(){
var username = $('#username').val();
var password = $('#password').val();
if(username==""){
alert('please Enter username');
}
else if(password==""){
alert('please Enter password');
}
else{
$('#loader').fadeIn(400).html('<span>Please Wait, User is being logged</span>');
var datasend = "username="+ username + "&password=" + password;
$.ajax({
type:'POST',
url:'login.php',
data:datasend,
crossDomain: true,
cache:false,
success:function(msg){
//empty username and password box after submission
$('#username').val('');
$('#password').val('');
$('#loader').hide();
$('#result').fadeIn('slow').prepend(msg);
$('#fadeoutResult').delay(5000).fadeOut('slow');
}
});
}
})
});
</script>
<div class="form-group mb-lg">
<label>Username</label>
<div class="input-group input-group-icon">
<input
name="username"
type="text"
class="form-control input-lg"
id="username"
/>
<span class="input-group-addon">
<span class="icon icon-lg">
<i class="fa fa-user"></i>
</span>
</span>
</div>
</div>
<div class="form-group mb-lg">
<div class="clearfix">
<label class="pull-left">Password</label>
<a href="#" class="pull-right">Lost Password?</a>
</div>
<div class="input-group input-group-icon">
<input
name="password"
type="password"
class="form-control input-lg"
id="password"
/>
<span class="input-group-addon">
<span class="icon icon-lg">
<i class="fa fa-lock"></i>
</span>
</span>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="checkbox-custom checkbox-default">
<input id="RememberMe" name="rememberme" type="checkbox" />
<label for="RememberMe">Remember Me</label>
</div>
</div>
<div class="col-sm-4 text-right">
<div id="loader"></div>
<div id="result"></div>
<div id="fadeoutResult"></div>
<button type="submit" class="btn btn-primary hidden-xs" id="signin">
Sign In Now
</button>
</button>
</div>
</div>
<p class="text-center">
Don't have an account yet? <a href="#">Sign Up!</a>
</p>
login.php
<?php
/*
//testing post data....
if($_POST['username'] != '' && $_POST['password'] !='') {
// username and password sent from form
echo $myusername = $_POST['username'];
echo $mypassword = $_POST['password'];
}
*/
include("php_functions/config.php");
session_start();
if($_POST['username'] != '' && $_POST['password'] !='') {
// username and password sent from form
echo $myusername = mysqli_real_escape_string($db,$_POST['username']);
echo $mypassword = mysqli_real_escape_string($db,$_POST['password']);
//$sql = "SELECT user_id FROM user WHERE username = '$myusername' and password = '$mypassword'";
$sql = "SELECT * FROM user WHERE username = '$myusername' and password = '$mypassword'";
$result = mysqli_query($db,$sql);
$rows = mysqli_fetch_array($result);
$count = mysqli_num_rows($result);
// If result matched $myusername and $mypassword, table row must be 1 row
if($count == 1) {
//prevent session fixation attack
session_regenerate_id();
$_SESSION['login_user'] = $myusername;
header("location: welcome.php");
} else {
echo '<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>',
echo '<script type="text/javascript">',
echo 'setTimeout(function () { swal("Oops!","Your Account Credentials is Invalid, Please Try Again!","error");',
echo '}, 100);</script>';
}
}
?>
