I'm trying to use ajax to insert using a simple form into my database(using insert.php) to practice. Below the var_dump($email) is hitting null. The script runs through to here:
echo "Data for $name inserted successfully!";
The problem is the variables are null as stated.
So we make it to there, but the output is an empty variable field like below:
Data for inserted successfully!
Am I missing something here?
index.php
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- The ajax/jquery stuff -->
<script type="text/javascript">
$(document).ready(function(){
//Get the input data using the post method when Push into mysql is clicked .. we pull it using the id fields of ID, Name and Email respectively...
$("#insert").click(function(){
//Get values of the input fields and store it into the variables.
var name=$("#name").val();
var email=$("#email").val();
//use the $.post() method to call insert.php file.. this is the ajax request
$.post('insert.php', {name: name, email: email},
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file
});
return false;
});
});
</script>
</head>
<body>
<form>
<label>Name: </label> <input id="name" type="text" />
<label>E-Mail: </label> <input id="email" type="text" />
</form>
<a id="insert" title="Insert Data" href="#">Push into mysql</a>
<!-- For displaying a message -->
<div id="message"></div>
</body>
</html>
insert.php
<?php
//Configure and Connect to the Databse
include "db_conx.php";
if (!$db_conx) {
die('Could not connect: ' . mysqli_error());
}
//Pull data from home.php front-end page
$name=$_POST['name'];
$email=$_POST['email'];
echo "<pre>";
var_dump($email);
echo "</pre><br>";
//Insert Data into mysql INSERT INTO best_rate (name,email)
$query= "INSERT INTO best_rate(name,email) VALUES('$name','$email')";
$result = mysqli_query($db_conx,$query);
if($query){
echo "Data for $name inserted successfully!";
}
else{ echo "An error occurred!"; }
?>
UPDATE PHP #2
<?php
//Configure and Connect to the Databse
include "db_conx.php";
if (!$db_conx) {
die('Could not connect: ' . mysqli_error());
}
//Pull data from home.php front-end page
$name=$_POST['myname'];
$email=$_POST['myemail'];
echo "<pre>";
var_dump($email);
echo "</pre><br>";
//Insert Data into mysql INSERT INTO best_rate (name,email)
$query= "INSERT INTO best_rate(name,email) VALUES('$name','$email')";
$result = mysqli_query($db_conx,$query);
if($query){
echo "Data for $name inserted successfully!";
}
else{ echo "An error occurred!"; }
?>
HTML #2
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- The ajax/jquery stuff -->
<script type="text/javascript">
$(document).ready(function(){
//Get the input data using the post method when Push into mysql is clicked .. we pull it using the id fields of ID, Name and Email respectively...
$("#insert").click(function(){
//Get values of the input fields and store it into the variables.
var name=$("#name").val();
var email=$("#email").val();
//use the $.post() method to call insert.php file.. this is the ajax request
$.post('insert.php', {myname: name, myemail: email},
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file
});
return false;
});
});
</script>
</head>
<body>
<form>
<label>Name: </label> <input id="name" type="text" name="myname"/>
<label>E-Mail: </label><input id="email" type="text" name="myemail"/>
</form>
<a id="insert" title="Insert Data" href="#">Push into mysql</a>
<!-- For displaying a message -->
<div id="message"></div>
</body>
</html>
Table Structure
===============================================
id | name | email
db_conx.php
<?php
$db_conx = mysqli_connect("localhost", "user", "pass", "database");
if (mysqli_connect_errno()) {
echo mysqli_connect_error();
exit();
}
?>
