Here's my insert page with a form, in this form I have inputs that contains required
but is not working when I test it in submitting an empty form otherwise When I submit it just only reload the page.
insertAdmin.php
<?php
session_start();
include("includes/db.php");
include_once("includes/functions.php");
$object = new Functions();
if(isset($_POST['insertNewAdmin'])) {
$username = $_POST['adminUsername'];
$password = $_POST['adminPassword'];
$firstname = $_POST['adminFirstname'];
$lastname = $_POST['adminLastname'];
$birthday = $_POST['adminBirthday'];
if(isset($_POST['adminGender'])) {
$gender = $_POST['adminGender'];
$address = $_POST['adminAddress'];
$object->InsertAdmin($username,$password,$firstname,$lastname,$birthday,$gender,$address);
}
}
?>
<?php
if(!isset($_SESSION['admin_username'])){
echo "<script>window.open('login.php?not_admin=Please login before you access!','_self')</script>";
}else {
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MIS</title>
<!-- Bootstrap -->
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!-- bootstrap-wysiwyg -->
<link href="../vendors/google-code-prettify/bin/prettify.min.css" rel="stylesheet">
<!-- Select2 -->
<link href="../vendors/select2/dist/css/select2.min.css" rel="stylesheet">
<!-- Switchery -->
<link href="../vendors/switchery/dist/switchery.min.css" rel="stylesheet">
<!-- starrr -->
<link href="../vendors/starrr/dist/starrr.css" rel="stylesheet">
<!-- bootstrap-daterangepicker -->
<link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="../build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<?php include('sidebar.php');?>
</div>
</div>
<!-- top navigation -->
<?php include('topnavigation.php'); ?>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Insert Administrator <small>for login purposes</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<br />
<form id="demo-form2" data-parsley-validate class="form-horizontal form-label-left" action="InsertAdmin.php" method="POST" required>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Username <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="first-name" required="required" class="form-control col-md-7 col-xs-12" name="adminUsername">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Password <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="password" id="first-name" required="required" class="form-control col-md-7 col-xs-12" name="adminPassword">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">First Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="first-name" required="required" class="form-control col-md-7 col-xs-12" name="adminFirstname">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">Last Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="last-name" required="required" class="form-control col-md-7 col-xs-12" name="adminLastname">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of Birth <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="birthday" class="date-picker form-control col-md-7 col-xs-12" required="required" type="text" name="adminBirthday">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Gender</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div id="gender" class="btn-group" data-toggle="buttons">
<label class="btn btn-default" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
<input type="radio" name="adminGender" value="Male"> Male
</label>
<label class="btn btn-primary" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
<input type="radio" name="adminGender" value="Female"> Female
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">Address<span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="last-name" required="required" class="form-control col-md-7 col-xs-12" name="adminAddress">
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button type="submit" class="btn btn-danger">Cancel</button>
<button type="submit" class="btn btn-success" name="insertNewAdmin">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- footer content -->
<?php include("footer.php"); ?>
<!-- /footer content -->
</div>
</div>
<?php } ?>
<!-- jQuery -->
<script src="../vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="../vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-progressbar -->
<script src="../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="../vendors/iCheck/icheck.min.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="../vendors/moment/min/moment.min.js"></script>
<script src="../vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- bootstrap-wysiwyg -->
<script src="../vendors/bootstrap-wysiwyg/js/bootstrap-wysiwyg.min.js"></script>
<script src="../vendors/jquery.hotkeys/jquery.hotkeys.js"></script>
<script src="../vendors/google-code-prettify/src/prettify.js"></script>
<!-- jQuery Tags Input -->
<script src="../vendors/jquery.tagsinput/src/jquery.tagsinput.js"></script>
<!-- Switchery -->
<script src="../vendors/switchery/dist/switchery.min.js"></script>
<!-- Select2 -->
<script src="../vendors/select2/dist/js/select2.full.min.js"></script>
<!-- Parsley -->
<script src="../vendors/parsleyjs/dist/parsley.min.js"></script>
<!-- Autosize -->
<script src="../vendors/autosize/dist/autosize.min.js"></script>
<!-- jQuery autocomplete -->
<script src="../vendors/devbridge-autocomplete/dist/jquery.autocomplete.min.js"></script>
<!-- starrr -->
<script src="../vendors/starrr/dist/starrr.js"></script>
<!-- Custom Theme Scripts -->
<script src="../build/js/custom.min.js"></script>
<!-- bootstrap-daterangepicker -->
<script>
$(document).ready(function() {
$('#birthday').daterangepicker({
singleDatePicker: true,
calender_style: "picker_4"
}, function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});
});
</script>
<!-- /bootstrap-daterangepicker -->
<!-- bootstrap-wysiwyg -->
<script>
$(document).ready(function() {
function initToolbarBootstrapBindings() {
var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
'Times New Roman', 'Verdana'
],
fontTarget = $('[title=Font]').siblings('.dropdown-menu');
$.each(fonts, function(idx, fontName) {
fontTarget.append($('<li><a data-edit="fontName ' + fontName + '" style="font-family:\'' + fontName + '\'">' + fontName + '</a></li>'));
});
$('a[title]').tooltip({
container: 'body'
});
$('.dropdown-menu input').click(function() {
return false;
})
.change(function() {
$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
})
.keydown('esc', function() {
this.value = '';
$(this).change();
});
$('[data-role=magic-overlay]').each(function() {
var overlay = $(this),
target = $(overlay.data('target'));
overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
});
if ("onwebkitspeechchange" in document.createElement("input")) {
var editorOffset = $('#editor').offset();
$('.voiceBtn').css('position', 'absolute').offset({
top: editorOffset.top,
left: editorOffset.left + $('#editor').innerWidth() - 35
});
} else {
$('.voiceBtn').hide();
}
}
function showErrorAlert(reason, detail) {
var msg = '';
if (reason === 'unsupported-file-type') {
msg = "Unsupported format " + detail;
} else {
console.log("error uploading file", reason, detail);
}
$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button>' +
'<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
}
initToolbarBootstrapBindings();
$('#editor').wysiwyg({
fileUploadError: showErrorAlert
});
window.prettyPrint;
prettyPrint();
});
</script>
<!-- /bootstrap-wysiwyg -->
<!-- Select2 -->
<script>
$(document).ready(function() {
$(".select2_single").select2({
placeholder: "Select a state",
allowClear: true
});
$(".select2_group").select2({});
$(".select2_multiple").select2({
maximumSelectionLength: 4,
placeholder: "With Max Selection limit 4",
allowClear: true
});
});
</script>
<!-- /Select2 -->
<!-- jQuery Tags Input -->
<script>
function onAddTag(tag) {
alert("Added a tag: " + tag);
}
function onRemoveTag(tag) {
alert("Removed a tag: " + tag);
}
function onChangeTag(input, tag) {
alert("Changed a tag: " + tag);
}
$(document).ready(function() {
$('#tags_1').tagsInput({
width: 'auto'
});
});
</script>
<!-- /jQuery Tags Input -->
<!-- Parsley -->
<script>
$(document).ready(function() {
$.listen('parsley:field:validate', function() {
validateFront();
});
$('#demo-form .btn').on('click', function() {
$('#demo-form').parsley().validate();
validateFront();
});
var validateFront = function() {
if (true === $('#demo-form').parsley().isValid()) {
$('.bs-callout-info').removeClass('hidden');
$('.bs-callout-warning').addClass('hidden');
} else {
$('.bs-callout-info').addClass('hidden');
$('.bs-callout-warning').removeClass('hidden');
}
};
});
$(document).ready(function() {
$.listen('parsley:field:validate', function() {
validateFront();
});
$('#demo-form2 .btn').on('click', function() {
$('#demo-form2').parsley().validate();
validateFront();
});
var validateFront = function() {
if (true === $('#demo-form2').parsley().isValid()) {
$('.bs-callout-info').removeClass('hidden');
$('.bs-callout-warning').addClass('hidden');
} else {
$('.bs-callout-info').addClass('hidden');
$('.bs-callout-warning').removeClass('hidden');
}
};
});
try {
hljs.initHighlightingOnLoad();
} catch (err) {}
</script>
<!-- /Parsley -->
<!-- Autosize -->
<script>
$(document).ready(function() {
autosize($('.resizable_textarea'));
});
</script>
<!-- /Autosize -->
<!-- Starrr -->
<script>
$(document).ready(function() {
$(".stars").starrr();
$('.stars-existing').starrr({
rating: 4
});
$('.stars').on('starrr:change', function (e, value) {
$('.stars-count').php(value);
});
$('.stars-existing').on('starrr:change', function (e, value) {
$('.stars-count-existing').php(value);
});
});
</script>
<!-- /Starrr -->
</body>
</html>
And here's my function for this page.
public function insertAdmin($adminUsername,$adminPassword,$firstname,$lastname,$birthday,$gender,$address){
$stmtGA= $this->con->prepare('SELECT admin_username FROM admins WHERE admin_username = ?');
$stmtGA->execute(array($adminUsername));
$value2 = $stmtGA->fetchColumn();
if($value2 == false) {
if(!empty($adminUsername) && !empty($adminPassword) && !empty($firstname) && !empty($lastname) && !empty($birthday) && !empty($gender) && !empty($address)) {
$stmtInsertAdmin = $this->con->prepare("INSERT INTO admins (admin_id, admin_username, admin_password, admin_firstname, admin_lastname, admin_birthday, admin_gender, admin_address) VALUES (:field1,:field2,:field3,:field4,:field5,:field6,:field7,:field8)");
$stmtInsertAdmin->execute(array(
':field1'=> NULL,
':field2' => $adminUsername,
':field3' => $adminPassword,
':field4' => $firstname,
':field5' => $lastname,
':field6' => $birthday,
':field7' => $gender,
':field8'=>$address));
if($stmtInsertAdmin == true) {
echo "<script>alert('Successfully Inserted, Thanks!')</script>";
echo "<script>window.open('viewadmins.php','_self')</script>";
} else {
echo "<script>alert('Your data isn't inserting, please try again!')</script>";
echo "<script>window.open('insertAdmin.php', '_self')</script>";
}
} else {
echo "<script>alert('Please fill all the fields, please try again!')</script>";
echo "<script>window.open('insertAdmin.php', '_self')</script>";
}
} else {
echo "<script>alert('Username is already exists, please try again!')</script>";
echo "<script>window.open('insertAdmin.php', '_self')</script>";
}
}
Please help me to resolve this problem. I have tried several solutions for this but still it's not working.