Hi i am trying to insert data to mysql from ajax with php here is my code can anyone help. The only error i get is that the data is not insert, in my mysql the values is not pass in. Where is the problem in my ajax? or in my php when i pass values.
index.php
<?php include "bd.php"; ?>
<!DOCTYPE html>
<html>
<head>
<title>Submit Form Using AJAX and jQuery</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="container ">
<form class="form-signin text-center col-md-6" method="post" action="">
<h2 class="form-signin-heading">Please Insert value in</h2>
<div class="form-group">
<label for="name" class="sr-only">Name:</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<label for="last_name" class="sr-only">Last name</label>
<input type="text" id="last_name" name="last_name" class="form-control" placeholder="Last Name" >
</div>
<div class="form-group">
<label for="email" class="sr-only">email:</label>
<input type="text" id="email" name="email" class="form-control" placeholder="Email" >
</div>
<div class="form-group">
<label for="phone" class="sr-only">Phone:</label>
<input type="text" id="phone" name="phone" class="form-control" placeholder="Phone" >
</div>
<div class="form-group">
<label for="bridge">Select list:</label>
<select class="form-control" id="bridge" name="bridge">
<option>None</option>
<option>eAgent</option>
<option>iArts</option>
<option>Orbit</option>
<option>G&G</option>
<option>EstateWeb</option>
<option>Globalc</option>
</select>
</div>
<div class="form-group">
<label for="comments">Comment:</label>
<textarea class="form-control" rows="5" id="comments" name="comments"></textarea>
</div>
<button type="button" id="submit" class="btn btn-lg btn-primary btn-block" >Register</button>
</form>
<div class="col-md-6">
<h2>Here is tha form with ajax.</h2>
</div>
</div> <!-- /container -->
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").serialize();
var last_name = $("#last_name").serialize();
var email = $("#email").serialize();
var phone = $("#phone").serialize();
var bridge = $("#bridge").serialize();
var comments = $("#comments").serialize();
$.ajax({
type : "POST",
url : "ajax.php",
data : {'name': name,'email': email ,'last_name':last_name,'phone':phone,'bridge': bridge, 'comments': comments},
success : function(result) {
alert(result);
}
});
});
});
</script>
</body>
</html>
Now my file of php where the connection is done.
<?php
/**
* Created by PhpStorm.
* User: erevos13
* Date: 26/6/2017
* Time: 11:13 μμ
*/
//is the databases connection
include "bd.php";
if (!$connection) {
die("Connection failed: " . mysqli_connect_error());
}
if (isset($_POST['name'])) {
$name = $_POST['name'];
$last_name = $_POST['last_name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$bridge = $_POST['bridge'];
$comments = $_POST['comments'];
$sql = "INSERT INTO info (`id` , `name`, `last_name`, `email `, `phone`, `bridge` , `comments` ) VALUES ( '' , '" . $name . "', '" . $last_name . "','" . $email . "', '" . $phone . "' , '" . $bridge . "', '" . $comments . "')";
$query = mysqli_query($connection, $sql);
if ($query) {
echo "data insert successfully";
} else {
echo "data is not insert";
}
}
The only error i get is the "data is not insert".
You should use console.log() function to check the data in the javascript code. And read a little bit more about serialize function at here. Your javascript code should be something like:
$.ajax({
type : "POST",
url : "ajax.php",
data : $("form").serialize();
Try val() in place of serialize().Check code for jquery:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var last_name = $("#last_name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var bridge = $("#bridge").val();
var comments = $("#comments").val();
$.ajax({
type : "POST",
url : "ajax.php",
data : {'name': name,'email': email ,'last_name':last_name,'phone':phone,'bridge': bridge, 'comments': comments},
success : function(result) {
alert(result);
}
});
});
});
</script>
Use .val() function instead .serialize(), if you have value of name is niklesh it will give name=niklesh and you expect only niklesh here.
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var last_name = $("#last_name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var bridge = $("#bridge").val();
var comments = $("#comments").val();
$.ajax({
type : "POST",
url : "ajax.php",
data : {"name": name,"email": email ,"last_name":last_name,"phone":phone,"bridge": bridge, "comments": comments},
success : function(result) {
alert(result);
}
});
});
});
Also use parameterised mysqli :
http://php.net/manual/en/mysqli.prepare.php#refsect1-mysqli.prepare-examples
Thanks to every one i found all the problem it was in :
$sql = "INSERT INTO info ( name, last_name, email , phone, bridge, comments ) VALUES ( '{$name}' , ' {$last_name} ','{$email }', '{$phone}' , '{$bridge}','{$comments}')";
I manage to find put in this in my code.:
mysqli_error($connection)
and i find that the mysql it was not insert one row. I fix that and all is good.