De qualquer forma, esse código em particular funciona para permitir a inserção no banco de dados, embora ainda haja algum problema em algum lugar que não consigo descobrir.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example with Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function () {
$('button').click(function () {
var name2 = $('#name').val();
var email2 = $('#email').val();
var password2 = $('#password').val();
var gender2 = $('#gender').val();
console.log('starting ajax');
$.ajax({
url: "./insert.php",
type: "post",
data: { name: name2, email: email2, password: password2, gender: gender2 },
success: function (data) {
var dataParsed = JSON.parse(data);
console.log(dataParsed);
}
});
});
});
</script>
<style>
.custom{
margin-left:200px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">Insert Data Using Ajax</h2>
<form class="form-horizontal" >
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input class="form-control" name="name" id="name" type="text" placeholder="Enter you name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input class="form-control" name="email" id="email" type="text" placeholder="Your Email...">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input class="form-control" name="password" id="password" type="text" placeholder="Your Password...">
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<select id="gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
insert.php
<?php
//Create connection
$connection = mysqli_connect('localhost', 'root', '', 'dbase');
if($_POST['name']){
$name = $_POST['name'];
$email = $_POST['email'];
$password= $_POST['password'];
$gender = $_POST['gender'];
$q = "INSERT INTO user (name, email, password, gender) VALUES ('$name', '$email', '$password', '$gender')";
$query = mysqli_query($connection, $q);
if($query){
echo json_encode("Data Inserted Successfully");
}
else {
echo json_encode('problem');
}
}
?>
