Good Day,
I`ve been doing a registration form using bootstrap validation. But the problem is I did it correctly but the error style are still the same.
<script type="text/javascript">
$("#createaccount").click(function(event) {
// Fetch form to apply custom Bootstrap validation
var form = $("#registration")
if (form[0].checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}else{
$('#registration').on('submit', function(event){
event.preventDefault();
$.ajax({
url:"/validation'); ?>",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function(){
$('#createaccount').attr('disabled', 'disabled');
},
success:function(data)
{
if(data.error)
{
//USERNAME
if(data.username_error != '')
{
$('#username_error').html(data.username_error);
$("#username").removeClass('is-valid');
$("#username").addClass('is-invalid');
}
else
{
$('#username_error').html('');
$("#username").removeClass('is-invalid');
$("#username").addClass('is-valid');
}
//EMAIL
if(data.email_error != '')
{
$('#email_error').html(data.email_error);
$("#email").removeClass('is-valid');
$("#email").addClass('is-invalid');
}
else
{
$('#email_error').html('');
$("#email").removeClass('is-invalid');
$("#email").addClass('is-valid');
}
//PASSWORD
if(data.password_error != '')
{
$('#password_error').html(data.password_error);
$("#password").removeClass('is-valid');
$("#password").addClass('is-invalid');
}
else
{
$('#password_error').html('');
$("#password").removeClass('is-invalid');
$("#password").addClass('is-valid');
}
//CONFIRMPASSWORD
if(data.confirmPassword_error != '')
{
$('#confirmPassword_error').html(data.confirmPassword_error);
$("#confirmPassword").removeClass('is-valid');
$("#confirmPassword").addClass('is-invalid');
}
else
{
$('#confirmPassword_error').html('');
$("#confirmPassword").removeClass('is-invalid');
$("#confirmPassword").addClass('is-valid');
}
//PIN
if(data.pin_error != '')
{
$('#pin_error').html(data.pin_error);
$("#pin").removeClass('is-valid');
$("#pin").addClass('is-invalid');
}
else
{
$('#pin_error').html('');
$("#pin").removeClass('is-invalid');
$("#pin").addClass('is-valid');
}
//CAPCHA
if(data.g_recaptcha_response != '')
{
$('#g_recaptcha_response').html(data.g_recaptcha_response);
}
else
{
$('#g_recaptcha_response').html('');
}
//TOS
if(data.invalidCheck_error != '')
{
$('#invalidCheck_error').html('You must agree before submitting.');
$("#invalidCheck").removeClass('is-valid');
$("#invalidCheck").addClass('is-invalid');
}
else
{
$('#invalidCheck_error').html('');
$("#invalidCheck").removeClass('is-invalid');
$("#invalidCheck").addClass('is-valid');
}
}
if(data.success)
{
$('#success_message').html(data.success);
$('#username_error').html('');
$("#username").removeClass('is-invalid');
$("#username").removeClass('is-valid');
$('#email_error').html('');
$("#email").removeClass('is-invalid');
$("#email").removeClass('is-valid');
$('#password_error').html('');
$("#password").removeClass('is-invalid');
$("#password").removeClass('is-valid');
$('#confirmPassword_error').html('');
$("#confirmPassword").removeClass('is-invalid');
$("#confirmPassword").removeClass('is-valid');
$('#pin_error').html('');
$("#pin").removeClass('is-invalid');
$("#pin").removeClass('is-valid');
$('#invalidCheck_error').html('');
$("#invalidCheck").removeClass('is-invalid');
$("#invalidCheck").removeClass('is-valid');
$('#registration')[0].reset();
}
$('#createaccount').attr('disabled', false);
}
})
});
}
form.addClass('was-validated');
});
</script>
<form class="needs-validation" method="post" id="registration">
<span id="success_message"></span>
<div class="form-group input-icon-left m-b-10">
<i class="fa fa-user"></i>
<input type="text" name="username" id="username" class="form-control form-control-secondary" placeholder="Username" minlength="4" maxlength="12" pattern="[a-zA-Z0-9._\s]+" required>
<div class="invalid-feedback" id="username_error"></div>
</div>
<div class="form-group input-icon-left m-b-10">
<i class="fa fa-envelope"></i>
<input type="email" name="email" id="email" class="form-control form-control-secondary" placeholder="Email Address" required>
<div class="invalid-feedback" id="email_error"></div>
</div>
<div class="divider"><span>Security</span></div>
<div class="form-group input-icon-left m-b-10">
<i class="fa fa-lock"></i>
<input type="password" name="password" id="password" class="form-control form-control-secondary" placeholder="Password" minlength="4" maxlength="12" pattern="[a-zA-Z0-9._\s]+" required>
<div class="invalid-feedback" id="password_error"></div>
</div>
<div class="form-group input-icon-left m-b-10">
<i class="fa fa-unlock"></i>
<input type="password" name="confirmPassword" id="confirmPassword" class="form-control form-control-secondary" placeholder="Repeat Password" required>
<div class="invalid-feedback" id="confirmPassword_error"></div>
</div>
<div class="form-group input-icon-left m-b-10">
<i class="fa fa-key"></i>
<input type="password" name="pin" id="pin" class="form-control form-control-secondary" placeholder="Pin" minlength="4" maxlength="12" pattern="[0-9._\s]+" required>
<div class="invalid-feedback" id="pin_error"></div>
</div>
<?php
if(get_settings('site_settings','enable_recapcha','')!=0){ ?>
<div class="divider"><span>I am not a robot</span></div>
<!-- recaptcha -->
<div class="d-flex justify-content-center">
<div class="form-group">
<div class="g-recaptcha-outer">
<!-- get yours: https://www.google.com/recaptcha/admin -->
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="<?php echo get_settings('site_settings','recaptcha_secretkey',''); ?>"></div>
</div>
</div>
<div class="invalid-feedback" id="g_recaptcha_response"></div>
</div>
<?php } ?>
<div class="divider"><span>Terms of Service</span></div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="0" name="invalidCheck" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
<span class="custom-control-description">Accept to terms of use</span>
</label>
<div class="invalid-feedback" id="invalidCheck_error"></div>
</div>
<input type="submit" class="btn btn-primary m-t-10 btn-block" value="Create Account" name="createaccount" id="createaccount"/>
</form>
Please check the result below, as you can see I was able the display the error using ajax but the input text still on a success mode. Hope anyone can help me with this I`m not good with ajax and jQuery. If you hate this just ignore my post instead giving my a negative feedback. Thanks
Related
I want to make a role in one login form for different admin users. But when I try to select finance in the dropdown menu I still get to enter the admin dashboard, not the finance dashboard. my db roles are called 'admin' and 'finance'.
This is my login form:
this is what I have so far:
<form method="post" name="login_form">
<div class="form-group">
<input class="form-control form-control-lg" id="username" alt="username" type="text" placeholder="Username" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control form-control-lg" id="password" type="password" alt="password" placeholder="Password" autocomplete="off">
</div>
<div class="input-group mb-3">
<select type="text" class="form-control" name="type" required="">
<option value="" disabled="" disabled="" selected="true">--Select Role--</option>
<option value="admin">Admin</option>
<option value="finance">Finance</option>
</select>
</div>
<div class="form-group">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="remember" onclick="myFunction()"><span class="custom-control-label">Show Password</span>
</label>
</div>
<div class="form-group">
<button class="btn btn-lg btn-block button3" ;color: rgb(243, 245, 238) !important;" value="Sign in" id="btn-login" name="btn-login">Log in</button>
</div>
<div class="form-group" id="alert-msg">
</form>
am I missing something?
<script type="text/javascript">
jQuery(function(){
$('form[name="login_form"]').on('submit', function(e){
e.preventDefault();
var u_username = $(this).find('input[alt="username"]').val();
var p_password = $(this).find('input[alt="password"]').val();
// var s_status = 1;
if (u_username === '' && p_password ===''){
$('#alert-msg').html('<div class="alert alert-danger"> Required Username and Password!</div>');
}else{
$.ajax({
type: 'POST',
url: 'init/controllers/login_process.php',
data: {
username: u_username,
password: p_password
//status: s_status
},
beforeSend: function(){
$('#alert-msg').html('');
}
})
.done(function(t){
if (t == 0){
$('#alert-msg').html('<div class="alert alert-danger">Incorrect username or password!</div>');
}else{
$("#btn-login").html('<img src="assets/images/loading.gif" /> Signing In ...');
setTimeout(' window.location.href = "documents/index.php"; ',2000);
}
});
}
});
});
</script>
<script>
function myFunction() {
var x = document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
I have a basic question but i can't find the solution .
how can i force my user to check the box : accept the condition ? (j'acceptes les conditions d'utilisations = i agree terms & conditions )
here is a pictures of my form :
here is my HTML:
<section id="formDom">
<form class="column g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">Nom</label>
<input type="text" class="form-control" placeholder="Dupont" id="firstName" required>
<div class="valid-feedback">
Ok
</div>
</div>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">prénom</label>
<input type="text" class="form-control" placeholder="Jean" id="lastName" required>
<div class="valid-feedback">
Ok
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Adresse mail</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">#</span>
<input type="email" class="form-control" id="email" aria-describedby="inputGroupPrepend"
placeholder="jeandupont#gmail.com" required>
<div class="invalid-feedback">
Adresse mail requise
</div>
</div>
</div>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">Ville</label>
<input type="text" class="form-control" placeholder="Paris" id="city" required>
<div class="valid-feedback">
Ok
</div>
</div>
<div class="col-md-4">
<label for="validationCustom03" class="form-label">Adresse</label>
<input type="text" class="form-control" placeholder="1 rue de Paris" id="adress" required>
<div class="invalid-feedback">
adresse réquise
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
J'accepte les conditions d'utilisations
</label>
<div class="invalid-feedback">
Vous devez accepteer les conditions d'utilisations
</div>
</div>
</div>
<div class="col-md-4">
<button id="buyBtn" class="btn btn-primary basket-btn" type="submit">Acheter</button>
</div>
</form>
</section>
Actually the user is forced to fill the form but he can submit without check the box ( accept condition )
Here is the JS :
function validForm() {
const form = document.querySelector('.needs-validation');
form.addEventListener('submit', function (event) {
event.preventDefault();
event.stopPropagation();
cameraIds = getBasket().map(item => { return item.id });
const contact = {
email: document.getElementById("email").value,
firstName: document.getElementById("firstName").value,
lastName: document.getElementById("lastName").value,
city: document.getElementById("city").value,
address: document.getElementById("adress").value,
}
createOrder(contact, cameraIds, (order, error) => {
if (error) {
alert('Merci de remplir le formulaire');
} else {
localStorage.clear();
location.assign(`confirmation.html?id=${order.orderId}`)
}
form.classList.add('was-validated');
})
})
}
validForm();
PS : i'm using BOOTSTRAP but i think you got it ^^
if(document.getElementById('invalidCheck').checked==true)
//you'r accepted the terms
else
//you should accept the terms
You can check if a checkbox is checked or not by testing the checked property of the input element:
var isChecked = document.querySelector('input[type="checkbox"]').checked;
if(!isChecked) {
alert("You must accept the terms before proceeding");
}
In your case, it will be:
var isChecked = document.querySelector('.needs-validation .form-check-input').checked;
You can check for document.getElementById("").checked
My code is executing only else statement ... I couldn't find a problem.
When I validated form attribute address with javascript, it is not taking validation from PHP code and taking else statement
expected result: Thanks for your order
actual result: technical issue
<?php
$toEmail = "herbsoul1#gmail.com";
$mailHeaders = "From: " . $_POST["name"] . "<". $_POST["email"] .">\r\n";
$subject="Site Mail from Xtreme-Fatburn";
$content="Name : ".$_POST["name"]."\n";
$content=$content."MobileNo : ".$_POST["MobileNo"]."\n";
$content=$content."Email : ".$_POST["email"]."\n";
$content=$content."State : ".$_POST["State"]."\n";
$content=$content."Address : ".$_POST["address"]."\n";
if(mail($toEmail, $subject, $content, $mailHeaders)) {
print "Thanks for your order.";
} else {
print "Some Technical Issues occured.";
}
?>
background code
<div id="about1" class="container-fluid " style="width:100%;height:580px">
<div class="row bg">
<div class="col-md-9"></div>
<div class="col-md-2" style="margin-top:192px;margin-left:0px;">
<div class="row main">
<div class="main-login main-center">
<form class="form-horizontal" method="post">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label dntr">Your Name</label><span id="userName-info" class="info">*</span>
<div class="cols-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" maxlength="30" placeholder="Enter your Name" />
</div>
</div>
</div>
<div class="form-group">
<label for="username" class="cols-sm-2 control-label dntr">Mobile No</label><span id="userName-info" class="info">*</span>
<div class="cols-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-mobile-phone" style="font-size:20px"></i></span>
<input type="text" class="form-control" name="MobileNo" id="MobileNo" onkeypress="return isNumber(event)" maxlength="10" placeholder="Enter your Mobile No" />
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label dntr">Your Email ID</label><span id="userName-info" class="info"></span>
<div class="cols-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" maxlength="30" name="email" id="email" placeholder="Enter your Email ID" />
</div>
</div>
</div>
<div class="form-group">
<label for="username" class="cols-sm-2 control-label dntr">State</label><span id="userName-info" class="info">*</span>
<div class="cols-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
<select class="form-control" id="sel1">
<option>Andaman and Nicobar Islands</option>
<option>Andhra Pradesh</option>
<option>Arunachal Prades</option>
<option>Assam</option>
<option>Bihar</option>
<option>Chhattisgarh</option>
<option>Chandigarh</option>
<option>Dadra and Nagar Haveli</option>
<option>Daman and Diu</option>
<option selected>Delhi</option>
<option>Goa</option>
<option>Gujarat</option>
<option>Haryana</option>
<option>Himachal Pradesh</option>
<option>Jammu and Kashmir</option>
<option>Jharkhand</option>
<option>Karnataka</option>
<option>Kerala</option>
<option>Lakshadweep</option>
<option>Madhya Pradesh</option>
<option>Maharashtra</option>
<option>Manipur</option>
<option>Meghalaya</option>
<option>Mizoram</option>
<option>Nagaland</option>
<option>Odisha</option>
<option>Punjab</option>
<option>Puducherry</option>
<option>Rajasthan</option>
<option>Sikkim</option>
<option>Tamil Nadu</option>
<option>Telangana</option>
<option>Tripura</option>
<option>Uttarakhand</option>
<option>Uttar Pradesh</option>
<option>West Bengal</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="address" class="cols-sm-2 control-label dntr">Your Address</label><span id="userName-info" class="info">*</span>
<div class="cols-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="address" id="address" maxlength="30" placeholder="Enter your address" />
</div>
</div>
</div>
<div class="form-group" style="padding-top:10px;">
<button type="button" class="btn btn-primary btn-lg btn-block login-button" id="Register" onClick="sendContact();">RUSH MY ORDER</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
javascript code
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<style>
.info {
font-size: .8em;
color: #FF6600;
letter-spacing: 1px;
padding-left: 5px;
}
</style>
<script>
function sendContact() {
var valid;
valid = validateContact();
if (valid) {
var name1 = $("#name").val();
var MobileNo1 = $("#MobileNo").val();
var email1 = $("#email").val();
var state1 = $("#sel1").val();
var address1 = $("#address").val();
jQuery.ajax({
url: "sendemail.php",
data: {
name: name1,
MobileNo: MobileNo1,
email: email1,
State: state1,
address: address1
},
type: "POST",
success: function(data) {
//$('#Register').html(data);
$("#name").val('');
$("#MobileNo").val('');
$("#email").val('');
$("#address").val('');
//$("#mail-status").html(data);
alert(data);
},
error: function() {}
});
}
}
function validateContact() {
var valid = true;
if (!$("#name").val()) {
valid = false;
alert("Please Enter Your Name");
return valid;
}
if ($("#email").val()) {
if (!$("#email").val().match(/^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/)) {
valid = false;
alert("Invalid Email ID");
return valid;
}
}
if (!$("#MobileNo").val()) {
valid = false;
alert("Please Enter Your Mobile Number");
return valid;
}
return valid;
}
$(document).ready(function() {
$('.openPopup').on('click', function() {
debugger;
$(".modal-content").html('');
var dataURL = $(this).attr('href');
//$('.modal-body').load(dataURL,function(){
// $('#dialog-example').modal({show:true});
//});
$.get(dataURL, function(data) {
//alert(data);
$(".modal-content").html(data).foundation("open");
});
});
});
function isNumber(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode != 46 && charCode > 31 &&
(charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
For getting the post data, change the button type to submit:
type="submit"
Also check the post data before sending mail
If you are working locally in windows In C:\xampp\php in php.ini file you have to check the setup. Find mail function and do the changes as below
[mail function]
; XAMPP: Don’t remove the semi column if you want to work with an SMTP Server like Mercury
; SMTP = localhost
; smtp_port = 25
Remove the semi colons before SMTP and smtp_port and set the SMTP to your smtp server and the port to your smtp port. Your settings should look as follows
SMTP = smtp.example.com
smtp_port = 25
And if your configuration is fine, please check the mail spam folder or mail configuration, whether it has some restriction.
OR
Use PHPMailerAutoload.php PHPMailer, that is quiet easy.
I tried your "HTML, Javascript & PHP" codes in my Windows XAMPP and after configuring the details in the php.ini & in sendmail.ini files, as given in this link, I can successfully send the email.
My javascript validation code are working..
Javascript: My javascript all field return false are working when re-Enter password javascript return false not working
Re Enter password javascript code not working...
its alert showing ...after alert show form goes submit
return false not working...
[Here is js Fiddle][1]
[1]: https://jsfiddle.net/Ln1cmaps/
**HTML**
<div class="container">
<div class="row main">
<div class="main-login main-center">
<h2>Admin Ragistration</h2>
<form class="" method="post" action="" name="signup" onsubmit="return validate()">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Your Name</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Your Email</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="email" class="form-control" name="email" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<label for="username" class="cols-sm-2 control-label">Username</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Username"/>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" id="password" placeholder="Enter your Password"/>
</div>
</div>
</div>
<div class="form-group">
<label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="confirmpassword" id="confirm" placeholder="Confirm your Password"/>
</div>
</div>
</div>
<div class="form-group ">
<input type="submit" name="submit" value="Register" class="btn btn-primary btn-lg btn-block login-button" />
</div>
</form>
</div>
</div>
</div>
**Javascript validation Code**
function validate() {
var name = document.signup.name.value.length;
var email = document.signup.email.value.length;
var username = document.signup.username.value.length;
var password = document.signup.password.value;
var rpass = document.signup.confirmpassword.value;
var re =(/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{8,16}$/);
if(name=="") {
alert("Please Enter Your Name");
document.signup.name.focus();
return false;
}
if(name<3) {
alert("Please Enter Your Correct Name");
document.signup.name.focus();
return false;
}
if(email=="") {
alert("Please Enter email");
document.signup.email.focus();
return false;
}
if(email<3) {
alert("Please Enter Your Correct email");
document.signup.email.focus();
return false;
}
if(username=="") {
alert("Please Enter Username");
document.signup.username.focus();
return false;
}
if(username<5) {
alert("Please Enter Username at least 5 digit");
document.signup.username.focus();
return false;
}
if(password=="") {
alert("Please Enter Your password");
document.signup.password.focus();
return false;
}
if(!re.test(password)) {
alert("Error: Password Must Contain Atleast One Number,One Special Character & One Upper Case");
document.signup.password.focus();
return false;
}
if(rpass =="") {
alert("Please Enter Your Password Again");
document.signup.rpass.focus();
return false;
}
if(rpass != password) {
alert("Password does'nt Matched");
document.signup.rpass.focus();
return false;
}
else {
return true;
}
}
document.signup.rpass.focus();
This is wrong, rpass field is not present. You should write
document.signup.confirmpassword.focus();
https://jsfiddle.net/vineeshmp/Ln1cmaps/1/
Give event.preventDefault(); at starting of your javascript function.
I think you need to change
else {
return true;
}
to a simple
return true;
Your else currently only applies to that last if. You don't need to use an else if you return false on all cases you need to consider.
In other words: if you first check all possibilities for a not valid case, then you can safely return true at the end.
replace your var re with below code : No need to include parentheses
Your code
var re = (/^(?=.[A-Z])(?=.[a-z])(?=.[0-9])(?=.[!##$%^&])[a-zA-Z0-9!##$%^&]{8,16}$/);
Updated code
var re = /^(?=.[A-Z])(?=.[a-z])(?=.[0-9])(?=.[!##$%^&])[a-zA-Z0-9!##$%^&]{8,16}$/;
my form is not posting values even though i have put method="post" and i think there is no error in my form.i have hide some input types by javascript. i am not understanding where the problem is can you rectify that ..my code is
<?php include "header.php" ?>
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="col-md-9" style="padding-top:10px;">
<h3 align="center">Blood Bank Registration </h3>
<form role="form" action="bbinsert.php" method="post" style="color:black">
<div class="form-group">
<input type="text" class="form-control" name="bbname" id="college" placeholder="Blood bank name" required>
</div>
<div class="form-group">
<select class="form-control" id="district" name="district" required>
<option >Select District</option>
<option value="prakasam">Prakasam</option>
<option value="guntur">Guntur</option>
<option value="Nellore">Nellore</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="mandal" name="mandal" required>
<option >Select Mandal</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="village" name="village" required>
<option >Select Village</option>
</select>
</div>
<div class="form-group" >
<input type="text" class="form-control" name="phno" placeholder="contact number" >
</div>
<p align="right">create employee<button onclick="return show();"><span class="glyphicon glyphicon-plus" ></span></button></p>
<div id="empform" style="display:none;" >
<div class="form-group">
<input type="text" class="form-control" name="empname1" placeholder="Employee Name" >
</div>
<div class="form-group">
<input type="text" class="form-control" name="empid1" placeholder="Employee Id" >
</div>
<div class="form-group">
<input type="text"class="form-control" name="password1" placeholder="password" >
</div>
<div class="form-group">
<input type="text"class="form-control" name="phno1" placeholder="Contact Number">
</div>
<p align="right"><button onclick="return hide();"><span class="glyphicon glyphicon-minus" ></span></button><button onclick="return show1();"><span class="glyphicon glyphicon-plus" ></span></button></p>
</div>
<div id="empform2" style="display:none;" >
<div class="form-group">
<input type="text" class="form-control" name="empname3" placeholder="Employee Name" >
</div>
<div class="form-group">
<input type="text" class="form-control" name="empid3" placeholder="Employee Id" >
</div>
<div class="form-group">
<input type="text"class="form-control" name="password3" placeholder="password" >
</div>
<div class="form-group">
<input type="text"class="form-control" name="phno3" placeholder="Contact Number">
</div>
<p align="right"><button onclick="return hide2();"><span class="glyphicon glyphicon-minus" ></span></button></p><br>
</div>
<input type="submit" class="btn btn-success" value="create" >
</form>
<script>
function show() {
if(document.getElementById('empform').style.display=='none') {
document.getElementById('empform').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('empform').style.display=='block') {
document.getElementById('empform').style.display='none';
}
return false;
}
function show1() {
if(document.getElementById('empform1').style.display=='none') {
document.getElementById('empform1').style.display='block';
}
return false;
}
function hide1() {
if(document.getElementById('empform1').style.display=='block') {
document.getElementById('empform1').style.display='none';
}
return false;
}
function show2() {
if(document.getElementById('empform2').style.display=='none') {
document.getElementById('empform2').style.display='block';
}
return false;
}
function hide2() {
if(document.getElementById('empform2').style.display=='block') {
document.getElementById('empform2').style.display='none';
}
return false;
}
</script>
bbinsert.php
<?php
include "connection.php";
if (isset($_POST['submit']))
{
$bbname=$_POST['bbname'];
$district=$_POST['district'];
$mandal=$_POST['mandal'];
$village=$_POST['village'];
$phno=$_POST['phno'];
$insertbb=mysqli_query($conn,"INSERT INTO bloodbanks(bbname,bbdistrict,bbmandal,bbcity,phno)VALUES('$bbname','$district',$mandal','$village','$phno')");
if(!$insertbb)
echo "error in blood bank insertion".mysqli_error($conn);
else
echo "successfully inserted blood banks";
$emp1 = array('empname1', 'empid1', 'password1','phno1');
$emp2 = array('empname2', 'empid2', 'password2','phno2');
$emp3 = array('empname3', 'empid3', 'password3','phno3');
$error = false; //No errors yet
foreach($emp1 AS $fieldname)
{ //Loop trough each field
if(!isset($_POST[$fieldname]) || empty($_POST[$fieldname]))
{
$error = true; //Yup there are errors
}
}
if(!$error) {
$empn1=$_POST['empname1'];
$empid1=$_POST['empid1'];
$password1=$_POST['password1'];
$phno1=$_POST['phno1'];
$insert1=mysqli_query($conn,"INSERT INTO employees(name,empid,password,phno,bbname)VALUES('$empn1','$emmpid1','$password1 ','$phno1','$bbname')");
if(!$insert1)
echo "error in emp1".mysqli_error($conn);
else
echo "success emp1";
}
$error1 = false; //No errors yet
foreach($emp2 AS $fieldname)
{ //Loop trough each field
if(!isset($_POST[$fieldname]) || empty($_POST[$fieldname]))
{
$error1 = true; //Yup there are errors
}
}
if(!$error1) {
$empn2=$_POST['empname2'];
$empid2=$_POST['empid2'];
$password2=$_POST['password2'];
$phno2=$_POST['phno2'];
$insert2=mysqli_query($conn,"INSERT INTO employees(name,empid,password,phno,bbname)VALUES('$empn2','$emmpid2','$password2','$phno2','$bbname')");
if(!$insert2)
echo "error in emp2".mysqli_error($conn);
else
echo "success emp2";
}
$error3 = false; //No errors yet
foreach($emp3 AS $fieldname)
{ //Loop trough each field
if(!isset($_POST[$fieldname]) || empty($_POST[$fieldname]))
{
$error3 = true; //Yup there are errors
}
}
if(!$error3) {
$empn3=$_POST['empname3'];
$empid3=$_POST['empid3'];
$password3=$_POST['password1'];
$phno3=$_POST['phno3'];
$insert3=mysqli_query($conn,"INSERT INTO employees(name,empid,password,phno,bbname)VALUES('$empn3','$emmpid3','$password3','$phno3','$bbname')");
if(!$insert3)
echo "error in emp3".mysqli_error($conn);
else
echo "success emp3";
}
}
else
{
echo "submit method did not post the form";
}
?>
`
Your submit button doesn't have a name attribute. So no post element called "submit" exists. Put a name on your submit button if you want it to post.