We Keep Coding

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>"; */
}
}
?>

How to fill into more than one textbox with data taken from mysql table after dropdown selection

I would like to fill more than one textbox with data taken from mysql table after dropdown selection. I saw this jsfiddle demo and works fine but I need something different. I have the following situation:
<div class="form-group">
<label class="control-label col-sm-2" for="pn_dn">Pn_DN:</label>
<div class="col-sm-4">
<select id="pn_dn" name="pn_dn" required>
<option value="">Seleziona</option>
<?php
$sql = "SELECT codice, cod_forn, descrizione, package, u_m FROM maglab";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$pn_dn = $row['codice'];
$descrizione = $row['descrizione'];
$pn_manufacturer = $row['cod_forn'];
$package = $row['package'];
$u_m = $row['u_m'];
?>
<option><?php echo $pn_dn; ?></option>
<?php } ?>
</select>
</div>
<?php } ?>
<label class="control-label col-sm-2" for="description">Descrizione:</label>
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="description" name="description" style="width: 100%;"> </textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pn_manufacturer">Pn_Fornitore:</label>
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="pn_manufacturer" name="pn_manufacturer" style="width: 100%;"> </textarea>
</div>
<label class="control-label col-sm-2" for="manufacturer">Fornitore:</label>
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="manufacturer" name="manufacturer" style="width: 100%;"> </textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="package">Package:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="package" name="package"> </div>
<label class="control-label col-sm-2" for="u_m">Unità di misura:</label>
<div class="col-sm-4">
<input type="u_m" class="form-control" id="u_m" name="u_m" required>
</div>
</div>
<script type="text/javascript">
var pn_dn = document.getElementById('pn_dn');
//var pn_manufacturer = document.getElementById('<?php echo json_encode($pn_manufacturer); ?>');
pn_dn.onchange = function(){
//document.getElementById("pn_manufacturer").innerHTML = '<?php echo json_encode($pn_manufacturer); ?>';
pn_manufacturer.value = this.value;
description.value = this.value;
package.value = this.value;
u_m.value = this.value;
}
</script>
With the above JS all the inputboxes are filled with pn_dn value but as I take $pn_dn, $descrizione, $pn_manufacturer, $package and $u_m from the table maglab, I would like to fill the inputboxes with $descrizione, $pn_manufacturer, $package and $u_m based on $pn_dn selection. How can the JS be mmodified?

You can use custom attribute and in this you can assign your required values for various fields .i.e:
<select id="pn_dn" name="pn_dn" required>
<option value="">Seleziona</option>
<?php
//your othercodes
?>
<!--use data--attr-->
<option descrizione='<?php echo $descrizione; ?>' pn_manufacturer='<?php echo $pn_manufacturer; ?>' package='<?php echo $package; ?>' u_m='<?php echo $package; ?>'>
<?php echo $pn_dn; ?>
</option>
<?php } ?>
</select>
Demo Code :
var pn_dn = document.getElementById('pn_dn');
pn_dn.onchange = function() {
//get select-index
var slected_index = this.options[this.selectedIndex]
//use getAttribute to get custom attribute
document.getElementById("pn_manufacturer").value = slected_index.getAttribute("pn_manufacturer");
document.getElementById("package").value = slected_index.getAttribute("package");
document.getElementById("u_m").value = slected_index.getAttribute("u_m");
document.getElementById("description").value = slected_index.getAttribute("descrizione");
}
<select id="pn_dn" name="pn_dn" required>
<option value="">Seleziona</option>
<!--use attr-->
<option descrizione='A' pn_manufacturer='Ab' package='2' u_m='1'>
Something ..
</option>
<option descrizione='B' pn_manufacturer='Bb' package='5' u_m='5'>
Something2 ..
</option>
</select>
<label class="control-label col-sm-2" for="description">Descrizione:</label>
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="description" name="description" style="width: 100%;"> </textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pn_manufacturer">Pn_Fornitore:</label>
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="pn_manufacturer" name="pn_manufacturer" style="width: 100%;"> </textarea>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="package">Package:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="package" name="package"> </div>
<label class="control-label col-sm-2" for="u_m">Unità di misura:</label>
<div class="col-sm-4">
<input type="u_m" class="form-control" id="u_m" name="u_m" required>
</div>
</div>

Trouble getting input form to return 'success' message and to reset

I have created a form based on the bootstrapious.com contact form tutorial. In my case I have changed it to populate a mysql database. Filling out the form and submitting it does get the information correctly in the database, but does not return a 'success' message or reset the form. I think the problem is in my javascript but am not sure. I would appreciate any help. Thanks
Here is my html
<!DOCTYPE html>
<html>
<head>
<title>Family Member</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='custom.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h1>Family Member Form</h1>
<p class="lead">Please enter your information on the form below</p>
<form id="familyMember-form" method="post" action="familyMember.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_firstname">Firstname *</label>
<input id="form_firstname" type="text" name="firstName" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Lastname *</label>
<input id="form_lastname" type="text" name="lastName" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_cellPhone">Cell Phone</label>
<input id="form_cellPhone" type="tel" name="cellPhone" class="form-control" placeholder="Please enter your cell phone number">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_password">Password*</label>
<input id="form_password" type="password" name="password" class="form-control" placeholder="Please enter your password*">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_passwordConfirmation">Confirm Password*</label>
<input id="form_passwordConfirmation" type="password" name="passwordConfirmation" class="form-control" placeholder="Please confirm your password*">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_familyCode">Family Code *</label>
<input id="form_familyCode" name="familyCode" class="form-control" placeholder="Please Enter Family Code *" rows="4" required="required" data-error="Please,leave us a message.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p></p>
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</form>
</div><!-- /.8 -->
</div> <!-- /.row-->
</div> <!-- /.container-->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="validator.js"></script>
<script src="familyMember.js"></script>
</body>
</html>
Here is my php
$okMessage = 'Family member has successfully added.';
$errorMessage = 'there was an error';
try
{
$pdo = new PDO('mysql:host=localhost; dbname=mydb', "user", "password");
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->exec('SET NAMES "utf8"');
}
catch (PDOException $e)
{
$output = 'Unable to connect to the database server:' . $e->getMessage();
include 'output.html.php';
exit();
}
//$output = 'Database connection established.';
//include 'output.html.php';
$firstName = $_POST['firstName'];
//echo $firstName;
//echo '<br>';
$lastName = $_POST['lastName'];
//echo $lastName;
//echo '<br>';
$email = $_POST['email'];
//echo $email;
//echo '<br>';
$cellPhone = $_POST['cellPhone'];
//echo $cellPhone;
//echo '<br>';
$password = $_POST['password'];
//echo $password;
//echo '<br>';
$familyCode = $_POST['familyCode'];
//echo $familyCode;
//echo '<br>';
try{
$sql = 'INSERT INTO familyMembers(FirstName, LastName, Email, Password, cell_phone, familyCode)
Values(:FirstName, :LastName, :Email, :Password, :cell_phone, :familyCode)';
$statement = $pdo -> prepare($sql);
$statement -> execute(array(':FirstName' => $firstName, ':LastName' =>$lastName, ':Email'=> $email, ':Password'=> $password, ':cell_phone' => $cellPhone, ':familyCode' => $familyCode));
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e){
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
else {
echo $responseArray['message'];
}
Here is my javascript
$(function () {
$('#familyMember-form').validator();
$('#familyMember-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "familyMember.php";
alert(url);
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
alert(url);
alert(data);
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
alert(messageAlert);
alert(messageText);
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#familyMember-form').find('.messages').html(alertBox);
$('#familyMember-form')[0].reset();
}
}
});
return false;
}
});
});

How to put back text on textarea, which was saved in session with line breaks.

I'm trying to keep textbox, select option and textarea values, after submit form without clicking on the reCAPTCHA box. It will keep the textbox, select option and textarea as i wish. but when the textarea has line breaks it will not appear text in the textarea.
php
<?php
session_start();
if(isset($_POST['submit'])){
if(isset($_POST['g-recaptcha-response'])){
//your site secret key
$secret = 'site secret key';
//get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
$responseData = json_decode($verifyResponse);
//contact form submission code
$name = $_POST['username'];
$replyto = $_POST['emailadd'];
$subject = $_POST['selectOption'];
$message = nl2br($_POST['message']);
$_SESSION['username'] = $name;
$_SESSION['replyto'] = $replyto;
$_SESSION['subject'] = $subject;
$_SESSION['message'] = $message;
if($responseData->success){
$email = "info#email.com";
$to = "info#email.com";
$headers = 'From:'.$name.' <'.$email.'>'."\r\n".'Reply-To:'.$replyto. "\r\n".'X-Mailer: PHP/' . phpversion();
mail($to,$subject,$message,$headers);
$succMsg = 'Your contact request have submitted successfully.';
session_destroy();
echo "<script type='text/javascript'>alert('$succMsg'); window.location = '/'; </script>";
}
else{
$flag = 1;
echo "<script type='text/javascript'>window.location = '#contactus';</script>";
}
}
else{
$flag = 1;
echo "<script type='text/javascript'>window.location = '#contactDiv';</script>";
}
}?>
< script type = "text/javascript" >
$(document).ready(function() {
$("#errorcaptcha").hide();
var flag = '<?php echo $flag; ?>';
var usernmae = "<?php if(isset($_SESSION['username'])){echo $_SESSION['username'];} ?>";//working fine
var email = "<?php if(isset($_SESSION['replyto'])){echo $_SESSION['replyto'];} ?>";//working fine
var subject = "<?php if(isset($_SESSION['subject'])){echo $_SESSION['subject'];} ?>";//working fine
var message = "<?php if(isset($_SESSION['message'])){echo $_SESSION['message'];} ?>"; //error here, works when without line breaks text
if (flag == 1) {
$("#errorcaptcha").show();
$('#username').val(usernmae);
$('#emailadd').val(email);
$('#selectOption').val(subject);
$('#message').val(message);
}
}); < /script>
<!DOCTYPE html>
<html lang="en">
<body id="page-top">
<form id="contactfrom" method="post">
<div class="form-group">
<div class="col-sm-12">
<input class="form-control" name="username" id="username" maxlength="40" required="required" type="text" placeholder="Your name" value="" /> </div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input class="form-control" id="emailadd" name="emailadd" required="required" type="email" maxlength="50" placeholder="Your email" />
</div>
</div>
<label for="username" class="uname" data-icon="u">Inquiry about</label>
<div class="form-group">
<div class="col-sm-12">
<select name="selectOption" id="selectOption" class="form-control">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<textarea maxlength="500" id="message" name="message" placeholder="Massage" class="form-control" rows="5" required="required"></textarea>
</div>
</div>
<div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label id="errorcaptcha" for="">Please click on the reCAPTCHA box.</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-12" id="recaptcha">
<div class="g-recaptcha" data-theme="dark" data-sitekey="sitekey"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</body>

Store in session you original $_POST['message']:
Replace
$message = nl2br($_POST['message']);
with
$message = $_POST['message'];
Then after format for your e-mail with nl2br:
mail($to,$subject,nl2br($message),$headers);

Finally i found my own way. textarea doesn't have a value. helpful link here
<textarea maxlength="500" id="message" type="text" name="message" placeholder="Massage" class="form-control" rows="5" required="required"><?php echo isset($_POST['message']) ? htmlspecialchars($_POST['message']):'' ?></textarea>

Can't save data inside phpmyAdmin

Problem :
Hi, I am having a problem with one of my submit form. I have already create a database and I also create a table as well. When I already fill up my form , and click the submit button, and check phpmyAdmin. It doesnt show the details that I already submitted .
This is my php code include the sql connect (reserve.php)
<?php
if($_POST['formSubmit'] === "Submit")
{
$errorMessage = "";
if(empty($_POST['formName']))
{
$errorMessage .= "<li> You forgot to enter your name! </li>";
}
//Doesnt Have List
$varName = $_POST['formName'];
$varEmail = $_POST['formEmail'];
$varPhone = $_POST['formPhone'];
$varStreet = $_POST['formStreet'];
$varNumber = $_POST['formNumber'];
$varCity = $_POST['formCity'];
$varPostCode = $_POST['formPostCode'];
$varCountry = $_POST['formCountry'];
//Have List
$varPeople = $_POST['formPeople'];
$varTables = $_POST['formTables'];
$varTime = $_POST['formTime'];
$varComment = $_POST['formComment'];
if(empty($errorMessage))
{
//Sql Connect
$db = mysql_connect ('sql999.byethost9.com','b9_9999999','password');
if(!$db) die("Error connecting to MySQL database.");
mysql_select_db('b9_9999999_database',$db);
$sql = "INSERT INTO form2 (Name, Email, Phone, Street, Number, City, PostCode, Country, People, Tables, Time, Comment) VALUES (".
//Doesnt Have List Dropdown
PrepSQL($varName) . ", ".
PrepSQL($varEmail) . ", ".
PrepSQL($varPhone) . ", ".
PrepSQL($varStreet) . ", ".
PrepSQL($varNumber) . ", ".
PrepSQL($varCity) . ", ".
PrepSQL($varPostCode) . ", ".
PrepSQL($varCountry) . ", ".
//Have List Dropdown
PrepSQL($varPeople) . ", ".
PrepSQL($varTables) . ", ".
PrepSQL($varTime) . ", ".
PrepSQL($varComment) . ") ";
mysql_query($sql);
header('Location:thankyou.html');
exit();
}
}
//function:PrepSQL()
//use stripslashes and mysql_real_escape_string PHP functions
//tosanitize a string for use in an SQL query
//
//also puts single quotes around the string
//
function PrepSQL($value)
{
//Stripslashes
if(get_magic_quotes_gpc())
{
$value = stripslashes($value);
}
//Quote
$value = "'" . mysql_real_escape_string($value) . "'";
return($value);
}
?>
AND THIS IS MY FORM CODE:
<html>
<?php include("reserve.php"); ?>
<body>
.......
<form action="<?php
echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<!-- PHP-->
<!-- General -->
<div class="form-group">
<h2 class="heading">Booking & contact</h2>
<div class="controls">
<input type="text" id="name" class="floatLabel" name="name" value="<?= $varName;
?>" />
<label for="name">Name</label>
</div>
<div class="controls">
<input type="text" id="email" class="floatLabel" name="email" value="<?= $varEmail;
?>" />
<label for="email">Email</label>
</div>
<div class="controls">
<input type="tel" id="phone" class="floatLabel" name="phone" value="<?= $varPhone;
?>" />
<label for="phone">Phone</label>
</div>
<div class="grid">
<div class="col-2-3">
<div class="controls">
<input type="text" id="street" class="floatLabel" name="street" value="<?= $varStreet;
?>" />
<label for="street">Street</label>
</div>
</div>
<div class="col-1-3">
<div class="controls">
<input type="number" id="street-number" class="floatLabel" name="street-number" value="<?= $varNumber;
?>" />
<label for="street-number">Number</label>
</div>
</div>
</div>
<div class="grid">
<div class="col-2-3">
<div class="controls">
<input type="text" id="city" class="floatLabel" name="city" value="<?= $varCity;
?>" />
<label for="city">City</label>
</div>
</div>
<div class="col-1-3">
<div class="controls">
<input type="text" id="post-code" class="floatLabel" name="post-code" value="<?= $varPostCode;
?>" />
<label for="post-code">Post Code</label>
</div>
</div>
</div>
<div class="controls">
<input type="text" id="country" class="floatLabel" name="country" value="<?= $varCountry;
?>" />
<label for="country">Country</label>
</div>
</div>
<!-- Details -->
<div class="form-group">
<h2 class="heading">Details</h2>
<div class="grid">
<div class="col-1-4 col-1-4-sm">
<div class="controls">
<input type="date" id="arrive" class="floatLabel" name="arrive" value="<?php
echo date('Y-m-d'); ?>">
<label for="arrive" class="label-date"><i class="fa fa-calendar"></i> Arrive</label>
</div>
</div>
</div>
<div class="grid">
<div class="col-1-3 col-1-3-sm">
<div class="controls"> <i class="fa fa-sort"></i>
<select class="floatLabel">
<option value="blank"></option>
<option value="1" <?php if ($varPeople === "Less than 5") echo ("selected=\"selected\""); ?>>Less than 5</option>
<option value="2" <?php if ($varPeople === "More than 5") echo ("selected=\"selected\""); ?>>More than 5</option>
<option value="3" <?php if ($varPeople === "More than 10") echo ("selected=\"selected\""); ?>>More than 10</option>
</select>
<label for="fruit"><i class="fa fa-male"></i> People</label>
</div>
</div>
<div class="col-1-3 col-1-3-sm">
<div class="controls"> <i class="fa fa-sort"></i>
<select class="floatLabel">
<option value="blank"></option>
<option value="deluxe" <?php if ($varTables === "Indoor") echo ("selected=\"selected\""); ?>>Indoor</option>
<option value="Zuri-zimmer" <?php if ($varTables === "Outdoor") echo ("selected=\"selected\""); ?>>Outdoor</option>
<option value="Zuri-zimmer" <?php if ($varTables === "VIP Room") echo ("selected=\"selected\""); ?>>VIP Room</option>
</select>
<label for="fruit">Tables</label>
</div>
</div>
<div class="col-1-3 col-1-3-sm">
<div class="controls"> <i class="fa fa-sort"></i>
<select class="floatLabel">
<option value="single-bed" <?php if ($varTime === "Breakfast") echo ("selected=\"selected\""); ?>>Breakfast</option>
<option value="double-bed" <?php if ($varTime === "Lunch") echo ("selected=\"selected\""); ?>>Lunch</option>
<!-- Add "selected >Lunch" when not using php code -->
<option value="double-bed" <?php if ($varTime === "Dinner") echo ("selected=\"selected\""); ?>>Dinner</option>
</select>
<label for="fruit">Time</label>
</div>
</div>
</div>
<div class="grid">
<p class="info-text">Please describe your needs e.g. Annual Dinner, Party</p>
<br>
<div class="controls">
<textarea name="comments" class="floatLabel" id="comments"><?= $varComment;
?>
</textarea>
<label for="comments">Comments</label>
</div>
<button type="submit" value="Submit" class="col-1-4">Submit</button>
</div>
</div>
<!-- /.form-group -->
</form>
....
</body>
</html>

Your form field name and in your serve.php name field doesnot match. Your updated Code should be
<?php
if($_POST['formSubmit'] === "Submit")
{
$errorMessage = "";
if(empty($_POST['formName']))
{
$errorMessage .= "<li> You forgot to enter your name! </li>";
}
//Doesnt Have List
$varName = $_POST['name'];
$varEmail = $_POST['email'];
$varPhone = $_POST['phone'];
$varStreet = $_POST['street'];
$varNumber = $_POST['street-number'];
$varCity = $_POST['city'];
$varPostCode = $_POST['post-code'];
$varCountry = $_POST['country'];
//Have List
$varPeople = $_POST['arrive'];
$varTables = $_POST['tables'];
$varTime = $_POST['time'];
$varComment = $_POST['comments'];
if(empty($errorMessage))
{
//Sql Connect
$db = mysql_connect ('sql999.byethost9.com','b9_9999999','password');
if(!$db) die("Error connecting to MySQL database.");
mysql_select_db('b9_9999999_database',$db);
$sql = "INSERT INTO form2 (Name, Email, Phone, Street, Number, City, PostCode, Country, People, Tables, Time, Comment) VALUES (".
//Doesnt Have List Dropdown
PrepSQL($varName) . ", ".
PrepSQL($varEmail) . ", ".
PrepSQL($varPhone) . ", ".
PrepSQL($varStreet) . ", ".
PrepSQL($varNumber) . ", ".
PrepSQL($varCity) . ", ".
PrepSQL($varPostCode) . ", ".
PrepSQL($varCountry) . ", ".
//Have List Dropdown
PrepSQL($varPeople) . ", ".
PrepSQL($varTables) . ", ".
PrepSQL($varTime) . ", ".
PrepSQL($varComment) . ") ";
mysql_query($sql);
header('Location:thankyou.html');
exit();
}
}
//function:PrepSQL()
//use stripslashes and mysql_real_escape_string PHP functions
//tosanitize a string for use in an SQL query
//
//also puts single quotes around the string
//
function PrepSQL($value)
{
//Stripslashes
if(get_magic_quotes_gpc())
{
$value = stripslashes($value);
}
//Quote
$value = "'" . mysql_real_escape_string($value) . "'";
return($value);
}
?>
This will solve your problem