I was trying to validate a form in Bootstrap, that was working fine. But as soon as I inserted my PHP code to insert the form data in the database, it stopped working.
As an output, Script is not working, also the submit option is disabled automatically. Any ideas why this is happening?
<!-- language: lang-php -->
<?php
session_start();
include 'form/db_connection.php';
include 'form/functions.php';
if (isset($_POST['submit']))
{
//$name = filter_input(INPUT_POST, 'name',FILTER_SANITIZE_STRING);
//$name=filter_string('name');
$name = $_POST['name'];
$sql1 ="INSERT INTO student (name)
VALUES ('$name')";
$res1 = mysqli_query($conn, $sql1);
if($res1)
{
//$last_id = mysqli_insert_id($conn);
header("Location: successful_message.php");
//echo 'Successful';
// . " Last inserted ID is: " . $last_id;
}
else
{
// echo "Failed";
header("Location: form1.php");
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/ecmascript"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<link rel="stylesheet" href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css">
<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<title>Form</title>
</head>
<body>
<div class="container-fluid">
<div class="container">
<form id="contactForm" method="post" action="form1.php" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="name" placeholder="First name" />
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</form>
<script>
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function generateCaptcha() {
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
}
generateCaptcha();
$('#contactForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The first name is required'
},
regexp: {
message: 'Name only contains Letter',
regexp: /^[A-Z a-z]*$/
}
}
},
lastName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
phoneNumber: {
validators: {
notEmpty: {
message: 'The phone number is required'
},
regexp: {
message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
regexp: /^[0-9\s\-()+\.]+$/
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
message: {
validators: {
notEmpty: {
message: 'The message is required'
},
stringLength: {
max: 700,
message: 'The message must be less than 700 characters long'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '),
sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
}
}
})
.on('err.form.fv', function(e) {
// Regenerate the captcha
generateCaptcha();
});
});
</script>
</div>
<!--End container -->
</div>
<!-- End container-fluid -->
</body>
</html>
