We Keep Coding

Modal validation using Bootstrap Modal - PHP

PHP Script & Validation:
function SampleInput($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
if (isset($_POST['RegisterClient'])) {
$file = $_FILES['avatar']['name'];
$file_location = $_FILES['avatar']['tmp_name'];
$folder = "../Public/img/uploads/profile-picture/";
$new_file_name = strtolower($file);
$final_file = str_replace(' ', '-', $new_file_name);
$name = htmlspecialchars(trim($_POST['name'], ENT_QUOTES));
$username = htmlspecialchars(trim($_POST['username'], ENT_QUOTES));
$email = htmlspecialchars(trim($_POST['email'], ENT_QUOTES));
$password = htmlspecialchars(trim($_POST['password'], ENT_QUOTES));
$cpassword = htmlspecialchars(trim($_POST['cpassword'], ENT_QUOTES));
$role = htmlspecialchars(trim($_POST['role'], ENT_QUOTES));
if (move_uploaded_file($file_location, $folder.$final_file)) {
$image = $final_file;
}
if(empty($_POST['name']) || empty($_POST['username']) || empty($_POST['password']) || empty($_POST['cpassword']) || empty($_POST['role'])) {
$error = "All fields are required!";
} else {
$name = SampleInput($_POST['name']);
$username = SampleInput($_POST['username']);
$password = SampleInput($_POST['password']);
$cpassword =SampleInput($_POST['cpassword']);
$role = SampleInput($_POST['role']);
if (!preg_match('/^[a-zA-Z0-9\s]+$/',$name && $username && $password && $cpassword && $role)) {
$error = "Only letters and white space allowed";
}
}
$stmt = $db->prepare("INSERT INTO clients(name, username, email, password, avatar, role, registration_date) VALUES (:name, :username, :email, :password, :avatar, :role, NOW())");
$stmt->execute(array(
'name' => $name,
'username' => $username,
'email' => $email,
'password' => $password,
'avatar' => $image,
'role' => $role
));
$success = 'Registered!';
}
Modal:
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<form action="" method="POST" enctype="multipart/form-data">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create user</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php
if ($error) {
echo '<div class="mb-3">' . $error . '</div>';
} else if ($success) {
echo '<div class="mb-3">' . $success . '</div>';
}
?>
<div class="row gx-3 mb-3">
<div class="col-md-12">
<label class="small mb-1" for="login-fullname">Full name*</label>
<input class="form-control" name="name" type="text" placeholder="Valid full name" />
</div>
</div>
<div class="mb-3">
<label class="small mb-1" for="login-username">Username (how your name will appear to other users on the site)</label>
<input class="form-control" name="username" type="text" placeholder="Valid username" />
</div>
<div class="mb-3">
<label class="small mb-1" for="login-email">Email address</label>
<input class="form-control" name="email" type="text" placeholder="Valid email" />
</div>
<div class="row gx-3 mb-3">
<div class="col-md-6">
<label class="small mb-1" for="login-password">Password</label>
<input class="form-control" name="password" type="password" placeholder="Strong password" />
</div>
<div class="col-md-6">
<label class="small mb-1" for="login-cpassword">Confirm Password</label>
<input class="form-control" name="cpassword" type="password" placeholder="Strong password" />
</div>
</div>
<div class="row gx-3 mb-3">
<div class="card-body text-center">
<input type="file" required class="btn btn-primary" name="avatar">
<div class="small font-italic text-muted mb-6">JPG or PNG no larger than 5 MB</div>
</div>
</div>
<div class="mb-3">
<label class="small mb-1" for="selectRole">Select user role</label>
<select class="form-control" name="role">
<option value="">Select user role</option>
<option value="admin">Admin</option>
<option value="user">User</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
<button type="submit" name="RegisterClient" class="btn btn-primary">Create</button>
</div>
</div>
</form>
</div>
</div>
I don't know where the problem is, I want the modal to remain open even if the problem or form has been submitted successfully. Now, with this code, if there is a problem with the submit form, the modal shuts down and if we open it again, the user can see error messages. Where am I wrong?

After a whole day, I resolve an issue with this.
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
With this code written above, a modal will be closed only if the user clicks on the close button. With this code, you disabled the close modal by pressing the ESC button on the keyboard.

Input validation - stop form from being clear out

I tried to create a sign up form where I need to validate if the the information entered is already exists in the database.
The code runs fine and can detect if the anything are already exists in the database.
The problem is it will clear all the form when it detects anything exists in database.
For example in below picture I try to input an email that already exists in database but in the second photo, all the form fields are clear out
Is there any ways to prevent the form from being cleared out? Its not convenience for user to re-fill the form again.
Below is my code.
<?php
include 'include/header.php';
include ('admin/include/dbcon.php');
?>
<script type="text/javascript">
$(document).ready(function() {
$("#inputState3").on('change', function() {
var val2 = $("#inputState3").val();
$.ajax({
url: "stdsec.php",
method: "post",
data: 'myvalue=' + val2
}).done(function(sec) {
$('#inputState1').html(sec);
})
})
});
</script>
<!-- STUDENT FORM SECTION START -->
<section class="Form-bg-image navbar-bottom-space fixNavColor" id="student-form">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-12 my-col">
<div class="outerdiv Signup-outerdiv">
<h1 class="Login-text">Sign Up</h1>
<div class="desc-text">New students on board are required to register to access the student
portal. <br> This only takes less than a minute. Already have an account? <a
href="studentlogin.php">Log
In</a> </div>
<hr>
<div class="InnerDiv InnerDiv2">
<form action="student_signup.php" method="post" enctype="multipart/form-data">
<div class="form-row">
<div class="form-group col-md-12">
<input name="fname" title="Please enter your name as per IC." type="text"
class="form-control input-fields" placeholder="First Name" required
id="fullname">
<span class="text-danger" id="fname"></span>
</div>
<div class="form-group col-md-12">
<input name="fficnum" title="Enter IC Number without dashes ( - )." type="text"
class="form-control input-fields" placeholder="IC Number" required
id="std_ic">
<span class="text-danger" id="SICnum"></span>
</div>
<div class="form-group col-md-6">
<input name="pass" title="Please enter your password." type="password"
class="form-control input-fields" placeholder="Your Password" required
id="password">
<span class="text-danger" id="Spassword"></span>
</div>
<div class="form-group col-md-6">
<input name="Cpass" title="Please confirm your password." type="password"
class="form-control input-fields" placeholder="Confirm Password" required
id="cpassword">
<span class="text-danger" id="SCpassword"></span>
</div>
<div class="form-group col-md-6">
<input name="email" title="Please enter your email address." type="email"
class="form-control input-fields" placeholder="Email Address" required
id="email">
<span class="text-danger" id="Semail"></span>
</div>
<div class="form-group col-md-6">
<select name="gender" id="inputState2" class="form-control input-fields"
required="true">
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group col-md-6">
<select name="dep" id="inputState3" class="form-control input-fields"
required="true">
<option value="">Department</option>
<?php
$data = mysqli_query($sql_con,"Select *from departments");
while ($row = mysqli_fetch_array($data)){
?>
<option value="<?php echo $row['id'] ?>"><?php echo $row['depname'] ?>
</option>
<?php } ?>
</select>
</div>
<div class="form-group col-md-6">
<select name="session" id="inputState1" class="form-control input-fields"
required="true">
<option value="">Session</option>
</select>
</div>
<div class="form-group col-md-6">
<input name="number" type="text" class="form-control input-fields"
placeholder="Contact Number" required id="number">
<span class="text-danger" id="Snumber"></span>
</div>
<div class="form-group col-md-6">
<div class="upload-div">
<input name="img" type="file" class="form-control" id="real-input"
hidden="hidden" required id="img">
<button type="button" id="custom-button">Upload Profile Picture
</button><br class="Br-Hide">
<span id="custom-text">No file chosen</span>
</div>
<span class="text-danger" id="imgerror"></span>
</div>
</div>
<div class="form-group">
<input name="address" type="text" class="form-control input-fields"
id="inputAddress" placeholder="Enter Your Address" required>
<span class="text-danger" id="Saddress"></span>
</div>
<center>
<input name="submit" type="submit" class="btn btn-primary btn-login-form2"
value="Create New Account" onclick="return validate2();">
</center>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
<p data-toggle="modal" data-target="#reg-success" class="forgot-para">Forgot
Password?</p>
-->
<!-- STUDENT FORM SECTION END -->
<!-- STUDENT SUCCESSFULL REGISTRATION MODAL DIALOG -->
<div class="modal fade" id="reg-success" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title forgot-heading" id="exampleModalLabel">Registration Success!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div><br>
<center><img src="../images/success-icon.svg" width="100" height="100"></center>
<div class="modal-body text-center">
<p class="password-errortxt">Congratulations, your account has been successfully created.</p>
<center>
<button name="submit" type="submit" class="btn btn-primary btn-login-form2"
onClick="parent.location='studentlogin.php'">Click Here to Login</button>
</center>
</div>
</div>
</div>
</div>
<?php
include('js/customUpload.js');
include('include/footer.php');
?>
<script type="text/javascript">
function validate2() {
var fname = document.getElementById('full_name').value;
var std_ic = document.getElementById('std_ic').value;
var email = document.getElementById('email').value;
var number = document.getElementById('number').value;
var address = document.getElementById('inputAddress').value;
var fnameCheck = /^([a-zA-Z',.-]+( [a-zA-Z',.-]+)*){3,20}$/;
var std_icCheck = /^(([[0-9]{2})(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01]))([0-9]{2})([0-9]{4})$/;
var emailCheck = /^([\w-\.]+#([\w-]*\.)+[\w-]{2,4})?$/;
var numberCheck = /^(\+?6?01)[0-46-9]-*[0-9]{7,8}$/;
if (fnameCheck.test(fname)) {
document.getElementById('fname').innerHTML = " ";
} else {
document.getElementById('fname').innerHTML = "Invalid Name!";
return false;
}
if (std_icCheck.test(std_ic)) {
document.getElementById('SICnum').innerHTML = " ";
} else {
document.getElementById('SICnum').innerHTML = "Invalid IC Number - Enter IC without dashes (XXXXXXXXXXXX)";
return false;
}
if (emailCheck.test(email)) {
document.getElementById('Semail').innerHTML = " ";
} else {
document.getElementById('Semail').innerHTML = "Invalid Email Address";
return false;
}
if (!isNaN($("number").val())) {} else if (numberCheck.test(number)) {
document.getElementById('Snumber').innerHTML = " ";
} else {
document.getElementById('Snumber').innerHTML = "Invalid phone number.";
return false;
}
if ($('#inputAddress').val().length < 20 || $('#inputAddress').val() == "") {
document.getElementById('Saddress').innerHTML = "At least 20 characters";
return false;
} else {
document.getElementById('Saddress').innerHTML = " ";
}
}
</script>
</body>
</html>
<?php
if (isset($_POST['submit'])) {
$email = $_POST['email'];
$data = mysqli_query($sql_con,"select stdemail from students");
while ($row = mysqli_fetch_array($data)) {
$emaildb = $row['stdemail'];
if($emaildb == $email){
echo "<script>document.getElementById('Semail').innerHTML = '** Email already exist'; </script>";
exit();
}
}
$SICnum = $_POST['fficnum'];
$data = mysqli_query($sql_con,"select std_ic from students");
while ($row = mysqli_fetch_array($data)) {
$icnumdb = $row['std_ic'];
if($icnumdb == $SICnum){
echo "<script>document.getElementById('SICnum').innerHTML = '** IC already exist'; </script>"; //SICnum = the column ID
//exit();
return false;
}
}
$folder = "suploads/";
$filename = $_FILES['img']["name"];
$unique = uniqid().$filename;
$temname = $_FILES['img']["tmp_name"];
$size = $_FILES['img']["size"];
$target = $folder.basename($unique);
$filetype = strtolower(pathinfo($target,PATHINFO_EXTENSION));
if ($filetype !="jpg" && $filetype !="png" && $filetype !="jpeg") {
echo "<script>document.getElementById('imgerror').innerHTML = '** File is not an image'; </script>";
exit();
}
else if($size > 2097152){
echo "<script>document.getElementById('imgerror').innerHTML = '** File is larger than 2MP';</script>";
exit();
}
else {
move_uploaded_file($temname,$target);
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$SICnum = $_POST['fficnum'];
$Cpass = $_POST['Cpass'];
$email = $_POST['email'];
$session = $_POST['session'];
$gender = $_POST['gender'];
$depart = $_POST['dep'];
$number = $_POST['number'];
$address = $_POST['address'];
mysqli_query($sql_con,"insert into students (full_name,std_ic,password,stdemail,session,gender,dep,snumber,img,address) values ('$fname','$SICnum','$Cpass','$email','$session','$gender','$depart','$number','$target','$address')");
echo "<script>$(document).ready(function(){ $('#reg-success').modal('show'); });</script>";
/* echo "<script>alert('You are successfully registered')</script>"; */
}
}
?>

Use the following code
<?php
include 'include/header.php';
include ('admin/include/dbcon.php');
$email = "";
?>
<script type="text/javascript">
$(document).ready(function() {
$("#inputState3").on('change', function() {
var val2 = $("#inputState3").val();
$.ajax({
url: "stdsec.php",
method: "post",
data: 'myvalue=' + val2
}).done(function(sec) {
$('#inputState1').html(sec);
})
})
});
</script>
<!-- STUDENT FORM SECTION START -->
<section class="Form-bg-image navbar-bottom-space fixNavColor" id="student-form">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-12 my-col">
<div class="outerdiv Signup-outerdiv">
<h1 class="Login-text">Sign Up</h1>
<div class="desc-text">New students on board are required to register to access the student
portal. <br> This only takes less than a minute. Already have an account? <a
href="studentlogin.php">Log
In</a> </div>
<hr>
<div class="InnerDiv InnerDiv2">
<form action="student_signup.php" method="post" enctype="multipart/form-data">
<div class="form-row">
<div class="form-group col-md-12">
<input name="fname" title="Please enter your name as per IC." type="text" value="<?php echo #$_POST['fname']; ?>"
class="form-control input-fields" placeholder="First Name" required
id="fullname">
<span class="text-danger" id="fname"></span>
</div>
<div class="form-group col-md-12">
<input name="fficnum" title="Enter IC Number without dashes ( - )." type="text" value="<?php echo #$_POST['fficnum']; ?>"
class="form-control input-fields" placeholder="IC Number" required
id="std_ic">
<span class="text-danger" id="SICnum"></span>
</div>
<div class="form-group col-md-6">
<input name="pass" title="Please enter your password." type="password" value="<?php echo #$_POST['pass']; ?>"
class="form-control input-fields" placeholder="Your Password" required
id="password">
<span class="text-danger" id="Spassword"></span>
</div>
<div class="form-group col-md-6">
<input name="Cpass" title="Please confirm your password." type="password" value="<?php echo #$_POST['Cpass']; ?>"
class="form-control input-fields" placeholder="Confirm Password" required
id="cpassword">
<span class="text-danger" id="SCpassword"></span>
</div>
<div class="form-group col-md-6">
<input name="email" title="Please enter your email address." type="email" value="<?php echo #$_POST['email']; ?>"
class="form-control input-fields" placeholder="Email Address" required
id="email">
<span class="text-danger" id="Semail"></span>
</div>
<div class="form-group col-md-6">
<select name="gender" id="inputState2" class="form-control input-fields"
required="true">
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group col-md-6">
<select name="dep" id="inputState3" class="form-control input-fields"
required="true">
<option value="">Department</option>
<?php
$data = mysqli_query($sql_con,"Select *from departments");
while ($row = mysqli_fetch_array($data)){
?>
<option value="<?php echo $row['id'] ?>"><?php echo $row['depname'] ?>
</option>
<?php } ?>
</select>
</div>
<div class="form-group col-md-6">
<select name="session" id="inputState1" class="form-control input-fields"
required="true">
<option value="">Session</option>
</select>
</div>
<div class="form-group col-md-6">
<input name="number" type="text" value="<?php echo #$_POST['number']; ?>" class="form-control input-fields"
placeholder="Contact Number" required id="number">
<span class="text-danger" id="Snumber"></span>
</div>
<div class="form-group col-md-6">
<div class="upload-div">
<input name="img" type="file" class="form-control" id="real-input" value="<?php echo #$_POST['img']; ?>"
hidden="hidden" required id="img">
<button type="button" id="custom-button">Upload Profile Picture
</button><br class="Br-Hide">
<span id="custom-text">No file chosen</span>
</div>
<span class="text-danger" id="imgerror"></span>
</div>
</div>
<div class="form-group">
<input name="address" value="<?php echo #$_POST['address']; ?>" type="text" class="form-control input-fields"
id="inputAddress" placeholder="Enter Your Address" required>
<span class="text-danger" id="Saddress"></span>
</div>
<center>
<input name="submit" type="submit" class="btn btn-primary btn-login-form2"
value="Create New Account" onclick="return validate2();">
</center>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
<p data-toggle="modal" data-target="#reg-success" class="forgot-para">Forgot
Password?</p>
-->
<!-- STUDENT FORM SECTION END -->
<!-- STUDENT SUCCESSFULL REGISTRATION MODAL DIALOG -->
<div class="modal fade" id="reg-success" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title forgot-heading" id="exampleModalLabel">Registration Success!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div><br>
<center><img src="../images/success-icon.svg" width="100" height="100"></center>
<div class="modal-body text-center">
<p class="password-errortxt">Congratulations, your account has been successfully created.</p>
<center>
<button name="submit" type="submit" class="btn btn-primary btn-login-form2"
onClick="parent.location='studentlogin.php'">Click Here to Login</button>
</center>
</div>
</div>
</div>
</div>
<?php
include('js/customUpload.js');
include('include/footer.php');
?>
<script type="text/javascript">
function validate2() {
var fname = document.getElementById('full_name').value;
var std_ic = document.getElementById('std_ic').value;
var email = document.getElementById('email').value;
var number = document.getElementById('number').value;
var address = document.getElementById('inputAddress').value;
var fnameCheck = /^([a-zA-Z',.-]+( [a-zA-Z',.-]+)*){3,20}$/;
var std_icCheck = /^(([[0-9]{2})(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01]))([0-9]{2})([0-9]{4})$/;
var emailCheck = /^([\w-\.]+#([\w-]*\.)+[\w-]{2,4})?$/;
var numberCheck = /^(\+?6?01)[0-46-9]-*[0-9]{7,8}$/;
if (fnameCheck.test(fname)) {
document.getElementById('fname').innerHTML = " ";
} else {
document.getElementById('fname').innerHTML = "Invalid Name!";
return false;
}
if (std_icCheck.test(std_ic)) {
document.getElementById('SICnum').innerHTML = " ";
} else {
document.getElementById('SICnum').innerHTML = "Invalid IC Number - Enter IC without dashes (XXXXXXXXXXXX)";
return false;
}
if (emailCheck.test(email)) {
document.getElementById('Semail').innerHTML = " ";
} else {
document.getElementById('Semail').innerHTML = "Invalid Email Address";
return false;
}
if (!isNaN($("number").val())) {} else if (numberCheck.test(number)) {
document.getElementById('Snumber').innerHTML = " ";
} else {
document.getElementById('Snumber').innerHTML = "Invalid phone number.";
return false;
}
if ($('#inputAddress').val().length < 20 || $('#inputAddress').val() == "") {
document.getElementById('Saddress').innerHTML = "At least 20 characters";
return false;
} else {
document.getElementById('Saddress').innerHTML = " ";
}
}
</script>
</body>
</html>
<?php
if (isset($_POST['submit'])) {
$email = $_POST['email'];
$data = mysqli_query($sql_con,"select stdemail from students");
while ($row = mysqli_fetch_array($data)) {
$emaildb = $row['stdemail'];
if($emaildb == $email){
echo "<script>document.getElementById('Semail').innerHTML = '** Email already exist'; </script>";
exit();
}
}
$SICnum = $_POST['fficnum'];
$data = mysqli_query($sql_con,"select std_ic from students");
while ($row = mysqli_fetch_array($data)) {
$icnumdb = $row['std_ic'];
if($icnumdb == $SICnum){
echo "<script>document.getElementById('SICnum').innerHTML = '** IC already exist'; </script>"; //SICnum = the column ID
//exit();
return false;
}
}
$folder = "suploads/";
$filename = $_FILES['img']["name"];
$unique = uniqid().$filename;
$temname = $_FILES['img']["tmp_name"];
$size = $_FILES['img']["size"];
$target = $folder.basename($unique);
$filetype = strtolower(pathinfo($target,PATHINFO_EXTENSION));
if ($filetype !="jpg" && $filetype !="png" && $filetype !="jpeg") {
echo "<script>document.getElementById('imgerror').innerHTML = '** File is not an image'; </script>";
exit();
}
else if($size > 2097152){
echo "<script>document.getElementById('imgerror').innerHTML = '** File is larger than 2MP';</script>";
exit();
}
else {
move_uploaded_file($temname,$target);
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$SICnum = $_POST['fficnum'];
$Cpass = $_POST['Cpass'];
$email = $_POST['email'];
$session = $_POST['session'];
$gender = $_POST['gender'];
$depart = $_POST['dep'];
$number = $_POST['number'];
$address = $_POST['address'];
mysqli_query($sql_con,"insert into students (full_name,std_ic,password,stdemail,session,gender,dep,snumber,img,address) values ('$fname','$SICnum','$Cpass','$email','$session','$gender','$depart','$number','$target','$address')");
echo "<script>$(document).ready(function(){ $('#reg-success').modal('show'); });</script>";
/* echo "<script>alert('You are successfully registered')</script>"; */
}
}
?>

Javascript next or previous button

This is My Model When i click my model
<div class="modal fade" id="checkoutModal" tabindex="-1" role="dialog" aria-labelledby="checkoutModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="checkoutModalLabel">Shipping Address</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="row">
<form action="thankYou.php" method="post" id="payment-form">
This tag tall every problem and there is background color call passed
<p class="bg-danger" id="payment-errors"></p>
This is the problem
There was Step 1 div open wher i click next then not going next div in step 2 as like pill type
<div id="step1" style="display: block;">
<div class="from-group col-md-6">
<label for="full_name">Full Name:</label>
<input class="form-control" id="full_name" name="full_name" type="text">
</div>
<div class="from-group col-md-6">
<label for="email">Email :</label>
<input class="form-control" id="email" name="email" type="email">
</div>
<div class="from-group col-md-6">
<label for="street">Street Address:</label>
<input class="form-control" id="street" name="street" type="text">
</div>
<div class="from-group col-md-6">
<label for="street2">Street Address 2:</label>
<input class="form-control" id="street2" name="street2" type="text">
</div>
<div class="from-group col-md-6">
<label for="city">City :</label>
<input class="form-control" id="city" name="city" type="text">
</div>
<div class="from-group col-md-6">
<label for="state">State :</label>
<input class="form-control" id="state" name="state" type="text">
</div>
<div class="from-group col-md-6">
<label for="zip_code">Zip Code:</label>
<input class="form-control" id="zip_code" name="zip_code" type="text">
</div>
<div class="from-group col-md-6">
<label for="country">Country:</label>
<input class="form-control" id="country" name="country" type="text">
</div>
</div>
When click next this div not open some error and this error up
<div id="step2" style="display: none;"></div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="check_address();">Next >></button>
</div>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
This is the button function work i think may help you
<script>
function check_address(){
var data = {
'full_name' : jQuery('#full_name').val(),
'email' : jQuery('#email').val(),
'street' : jQuery('#street').val(),
'street2' : jQuery('#street2').val(),
'city' : jQuery('#city').val(),
'state' : jQuery('#state').val(),
'zip_code' : jQuery('#zip_code').val(),
'country' : jQuery('#country').val()
};
jQuery.ajax({
url : '/ecommerce/admin/parsers/check_address.php',
method : 'POST',
data : data,
success : function(data){
if(data != 'passed'){
jQuery('#payment-errors').html(data);
}
if(data == 'passed'){
alert('Passed!');
}
},
error : function (){alert("Something Went Wrong");}
});
}
</script>
This is another page link and this is check file for java script file
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/ecommerce/connection/init.php';
$name = sanitize($_POST['full_name']);
$email = sanitize($_POST['email']);
$street = sanitize($_POST['street']);
$street2 = sanitize($_POST['street2']);
$city = sanitize($_POST['city']);
$state = sanitize($_POST['state']);
$zip_code = sanitize($_POST['zip_code']);
$country = sanitize($_POST['country']);
$errors = array();
$required = array (
'full_name' => 'Full Name',
'email' => 'Email',
'street' => 'Street Address',
'city' => 'City',
'state' => 'State',
'zip_code' => 'Zip Code',
'country' => 'Country',
);
//All field is Required
foreach($required as $f => $d){
if(empty($_POST[$f]) || $_POST[$f] == ''){
$errors[] = $d.' is required.';
}
}
// Valid Email Address
if(!filter_var($email,FILTER_VALIDATE_EMAIL)){
$errors[] = 'Please Enter a valid Email.';
}
if(!empty($errors)){
echo display_errors($errors);
}else{
echo 'passed';
}

Showing AJAX Confrimation into a modal

I have a form which basically inserts the form data into database. I am doing this by AJAX request. Now, So when the data is inserted the success info of "rentinsert.php" is shown in the form page which is showing "Your order has bee placed". What i want to do is to show it into a modal. So how to show the success message upon AJAX in a modal. Below is my code -
the html -
<form method="post" id="rentalform" action="rentinsertdb.php">
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Full Name</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" placeholder="Enter full name" name="rentname">
</div>
</div>
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Choose your ride</label>
<div class="col-sm-8 tabular-border">
<div class="dropdown">
<select class="btn btn-default dropdown-toggle" name="rentcar" >
<option>Choose your ride</option>
<option value="Toyota Alion 2008">Toyota Alion 2008</option>
<option value="Toyota Alion 2008">Toyota Premio 2008</option>
<option value="Toyota Alion 2008">Toyota Corolla 2006</option>
<option value="Toyota Alion 2008">Toyota Noah 2010</option>
</select>
</div>
</div>
</div>
<!-- <div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" id="focusedinput" placeholder="Enter phone number">
</div>
<div class="col-sm-2">
<p class="help-block"></p>
</div>
</div> -->
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" name="rentphone" placeholder="Enter phone number">
</div>
<div class="col-sm-2">
<p class="help-block"></p>
</div>
</div>
<div class="form-group space">
<label for="txtarea1" class="col-sm-2 control-label">Pick up address</label>
<div class="col-sm-8 tabular-border"><textarea name="rentaddress" cols="50" rows="4" class="form-control" placeholder="Enter Full Address; For example: House#38, Road 7/a, Dhanmondi, Dhaka-1205, Bangladesh"></textarea></div>
</div>
<div class="col-sm-8 col-sm-offset-2 space">
<button class="btn-primary btn" style="background-color:#03a9f4; border-color:#03a9f4;" id="submitrent"> Confirm </button>
</div>
</form>
</div>
<span id="result"></span>
<script type="text/javascript">
$("#submitrent").click( function() {
$.post( $("#rentalform").attr("action"),
$("#rentalform :input").serializeArray(),
function(info){ $("#result").html(info);
});
// clearInput();
});
$("#rentalform").submit( function() {
return false;
});
// function clearInput() {
// $("#myForm :input").each( function() {
// $(this).val('');
// });
// }
</script>
rentinsert.php -
<?php
header("Access-Control-Allow-Origin: *");
include_once "rentconnection.php";
// echo "<pre>";
// print_r($_POST);
$sql = "INSERT INTO `rental`
(`name`,`car`,`phone`,`address`)
VALUES ('".$_POST['rentname']."','".$_POST['rentphone']."','".$_POST['rentcar']."','".$_POST['rentaddress']."');";
if(mysqli_query($con, $sql)){
?>
<body style= "background-color:#1D726A">
<h1>Your Order Has Been Placed! </h1>
</body>
<?php
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);
?>

You need to echo your message when you successfully insert data into database
if (mysqli_query($con, $sql)) {
echo "<body style= 'background-color:#1D726A'><h1>Your Order Has Been Placed! </h1></body>";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);

if (mysqli_query($con, $sql)) {
echo json_encode(array('message' => 'Your Order Has Been Placed!'));
exit();
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);
Add modal
<div class="modal fade" id="modal-content">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p id="msg">Message here!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Show message in view
("#submitrent").click( function() {
$.post( $("#rentalform").attr("action"),
$("#rentalform :input").serializeArray(),
function(info){
var obj = jQuery.parseJSON(info);
$("#msg").html(obj.message);
$("#modal-content").modal('show');
});
// clearInput();
});

Not getting any value in $_POST after from submit

I am facing a problem in my local wamp server while submitting a page in PHP
I am using post method and after submitting the form I am not getting any values in $_POST.
I searched a lot on internet but did not get any good solution.
Here is my code
<form name="form_modulesadd" id="form_modulesadd" method="POST" enctype="multipart/form-data" action="#" class="form-horizontal" >
<div class="form-group">
<label class="control-label col-md-2">Module Type<span class="required_mark">*</span></label>
<div class="col-md-7">
<select id="module_t" name="module_t" class="form-control" onchange="getProductName()">
<option value="">Select Module Type</option>
<option value="1" <?php if($data['module_type'] == '1'){ echo 'selected'; } ?> >Video Module</option>
<option value="2" <?php if($data['module_type'] == '2'){ echo 'selected'; } ?> >Qbank Module</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Product Name<span class="required_mark">*</span></label>
<div class="col-md-7">
<select id="moduleajax" name="product_n" class="form-control" onchange="getProductData()">
<option value="">Select Product Name</option>
<?php
foreach($result_product1 as $k => $data_p)
{
$selected = ($data['productId'] == $data_p['id'])?'selected': '';
echo '<option '. $selected .' value='.$data_p['id'].'>' . $data_p['product_name'] . '</option>';
}
?>
</select>
</div>
</div>
<div id="productajax">
</div>
<?php
if(!empty($data))
{
$qry_s="SELECT * FROM tbl_products WHERE status =1 and id='".$data['productId']."'";
$result_s = $modelObj->fetchRow($qry_s);
$qry = "SELECT name FROM tbl_category WHERE id = '".$result_s['categoryId']."'";
$data1 = $modelObj->fetchRow($qry);
?>
<div id="productHide">
<div class="form-group">
<label class="control-label col-md-2">Category Name</label>
<div class="col-md-7">
<input class="form-control" onkeydown="call(event,this.id)" type="text" value="<?php echo $data1['name'] ?>" disabled/>
</div>
<br><br>
<label class="control-label col-md-2">Price</label>
<div class="col-md-7">
<input class="form-control" onkeydown="call(event,this.id)" type="text" value="<?php echo $result_s['p_price'] ?>" disabled/>
</div><br><Br>
<label class="control-label col-md-2">Maximum Attempts</label>
<div class="col-md-7">
<input class="form-control" onkeydown="call(event,this.id)" type="text" value="<?php echo $result_s['p_max_attempt'] ?>" disabled/>
</div><br><Br>
<?php if($data['module_type'] == '2') { ?>
<label class="control-label col-md-2">Exam Hour</label>
<div class="col-md-7">
<input class="form-control" onkeydown="call(event,this.id)" type="text" value="<?php echo $result_s['exam_hour'] ?>" disabled/>
</div><br><br>
<label class="control-label col-md-2">Pass mark or question</label>
<div class="col-md-7">
<input class="form-control" onkeydown="call(event,this.id)" type="text" value="<?php echo $result_s['pass_mark'] ?>" disabled/>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
<div class="form-group">
<label class="control-label col-md-2">Module Name<span class="required_mark">*</span></label>
<div class="col-md-7">
<input class="form-control" placeholder="Module Name" onkeydown="call(event,this.id)" type="text" name="txt_addmodulename" maxlength = "50" id="txt_addmodulename" value="<?php echo stripslashes($data['module_name']) ?>"/>
</div>
</div>
<div id="str_video" style="display: none;">
<div id="nameBoxWrap_d1">
<div class="form-group">
<label class="control-label col-md-2">Module Video<span class="required_mark">*</span></label>
<div class="col-md-7">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div>
<span class="btn btn-default btn-file"><span class="fileupload-new">Select Video</span><span class="fileupload-exists">Change</span>
<input type="file" name="name_dig[]" id="name_d1">
</span>
<span class="video_image_class">Video Image</span>
<input style="padding-right: 230px; float: right; margin-top: 3px;" type="file" name="name_vi[]" id="name_vi1">
<br><br><input type="button" value="Addmore Video" onclick="addNameSection1()" class="btn btn-primary" style="background-color: green;">
<b>Only .mp4, .flv, .ogg, .webm Video support</b>
</div>
</div>
</div>
<input type="hidden" id="addSectionCount1" value="1" name="addSectionCount1">
</div>
<?php
if(!empty($data))
{
?>
<div id="fileajax">
<div class="form-group" >
<label class="control-label col-md-2"> </label>
<div class="col-md-7">
<?php
$qry = "SELECT * FROM tbl_module_video WHERE moduleId = '".$_POST['id']."'";
$data_fl = $modelObj->fetchRows($qry);
foreach($data_fl as $d => $dav)
{
?>
<img width="50" src="<?php echo $_SESSION['FRNT_DOMAIN_NAME']."upload/module/".$dav['video_image'] ?>">
<button type="button" class="label label-danger" onclick="deletevd('<?php echo $dav['id'] ?>','<?php echo $_POST['id'] ?>');">Delete</button>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<!--<div id="str_video1">
<div id="nameBoxWrap_v1">
<div class="form-group">
<label class="control-label col-md-2"></label>
<div class="col-md-7">
<div class="col-md-10">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new img-thumbnail" style="width: 200px; height: 125px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image">
</div>
<div class="fileupload-preview fileupload-exists img-thumbnail" style="width: 200px; max-height: 125px"></div>
<div>
<span class="btn btn-default btn-file">
<span class="fileupload-new">Select Video Image</span><span class="fileupload-exists">Change</span>
<input type="file" name="name_vi" id="name_vi1" accept="image/*">
</span>
<a class="btn btn-default fileupload-exists" data-dismiss="fileupload" href="#">Remove</a>
</div>
</div>
</div>
</div>
<input type="hidden" id="addSectionCount1" value="1" name="addSectionCount1">
</div>
</div>
</div>-->
<?php if($_POST['id'] !=0):?>
<div class="form-group">
<label class="control-label col-md-2"></label>
<div class="col-md-7">
<input type="hidden" name="hid_userid" id="hid_userid" value="<?php echo $data['id'] ?>" />
<input type="hidden" name="hid_update" id="hid_update" value="update" />
<button type="submit" class="btn btn-primary" onclick="return updatedata()">Submit</button>
<button type="button" class="btn btn-default-outline" onclick="newdata();">Cancel</button>
</div>
</div>
<?php else:?>
<div class="form-group">
<label class="control-label col-md-2"></label>
<div class="col-md-7">
<input type="hidden" name="hid_add" id="hid_add" value="1" />
<button type="submit" class="btn btn-primary" onclick="return adddata()">Submit</button>
<button type="button" class="btn btn-default-outline" onclick="newdata();">Cancel</button>
</div>
</div>
<?php endif;?>
</form>
And here is my javascript from which I am call the page
var options = {
beforeSubmit: showRequest,
success: showResponse,
url: site_url + 'controllers/ajax_controller/modules-ajax-controller.php',
type: "POST"
};
$('#form_modulesadd').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
after submitting the page I am not getting any values in $_POST
this code is working fine in the server.
In local Environment it's giving problem
I am using wamp server. I have already tried with var_dump(),print_r() but not getting any result.
Any help would be appreciated.
Thanks in advance.

In your options, you should specify the data that you want to send.
var options = {
beforeSubmit: showRequest,
success: showResponse,
url: site_url + 'controllers/ajax_controller/modules-ajax-controller.php',
type: "POST",
data: {data1: "your_data", data2: "your_data"}
};
Then, try:
<?php echo $_POST["data1"]; ?>
It will show the data send, here: your_data

Use data option to send the data to the server.
var options = {
...
data: $('#form_modulesadd').serialize(),
...
};
$('#form_modulesadd').serialize() will send the data from the form.
EDIT
Try ajax:
$('#form_modulesadd').submit(function() {
$.ajax(options);
return false;
});

use <form name="form_modulesadd" id="form_modulesadd" method="POST" enctype="multipart/form-data" action="<?=site_url?>controllers/ajax_controller/modules-ajax-controller.php'" class="form-horizontal" >