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?
<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>
<?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!"; }
?>
<?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>
<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>
===============================================
id | name | email
<?php
$db_conx = mysqli_connect("localhost", "user", "pass", "database");
if (mysqli_connect_errno()) {
echo mysqli_connect_error();
exit();
}
?>
I can see you are having post method issue so we can use $.get instead of $.post and receive the data on $_GET["name"]
I think this is correct solution for now.
Thanks
you havent gave name attribut to your feilds
<input id="name" type="text" />
use instead
<input id="name" type="text" name="myname"/>
and then used like this in your php file
$name=$_POST['myname'];
I have checked your code and working correctly, as I can see there might be some issue with database connection or something mysql related. Your code working correct no need to give name or any other parameter in HTML as you have posted and given variable in jquery.
If you want more details you need to provide mysql related config file and table structure so I can check correctly.
Thanks
It sounds to me that the values from the inputs aren't getting passed to the php script to insert them.
I have noticed in your code that you pass an oject that contains these values:
$.post('insert.php', {myname: name, myemail: email},
I beleive that you are setting the name of the property (ie. myname) incorrectly. From my understanding, the javascript is interpriting myname as a variable rather than a name. The correct code would be:
$.post('insert.php', {'myname': name, 'myemail': email},
This would then properly set the POST variables to use in your php code.