3

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();
}
?>
2
  • Just for debugging, can use GET instead of POST. And then press F12 if u r using Chrome browser and then go to Console. Click on the Insert Data link and check if the values are getting passed through ajax request. Apr 20, 2015 at 7:34
  • @ℛⱥℐℰşℎ nope no data coming through.
    – Chris
    Apr 20, 2015 at 8:04

4 Answers 4

4

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'];
3
  • Still returning null values. Looking in firebug console I see post which shows myemail d myname d and source is myname=d&myemail=d
    – Chris
    Apr 20, 2015 at 7:02
  • echo these $name=$_POST['myname']; $email=$_POST['myemail']; Apr 20, 2015 at 7:05
  • Echoed both. Nothing came through as in the success message.
    – Chris
    Apr 20, 2015 at 7:13
1

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

0

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

11
  • The form itself is sending blank rows so my assumption is that we're having no issue connecting, right?
    – Chris
    Apr 20, 2015 at 7:02
  • I have checked and the data is correctly sending to the insert.php. I have checked on my local host and it's inserting data correctly with your code, so I am sure something with the database or connection related. Apr 20, 2015 at 7:04
  • Okay I just uploaded table structure and db_conx.php
    – Chris
    Apr 20, 2015 at 7:12
  • Hi Chris, I have checked and it's working fine. You can see my db structure Apr 20, 2015 at 7:22
  • CREATE TABLE best_rate ( id int(10) unsigned NOT NULL AUTO_INCREMENT, name varchar(45) NOT NULL, email varchar(45) NOT NULL, PRIMARY KEY (id) ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1; ========================================================$db_conx=mysqli_connect("localhost","root","","my_db"); if (mysqli_connect_errno()) { echo mysqli_connect_error(); exit(); } Apr 20, 2015 at 7:23
0

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.

1
  • Changed this piece, but I'm still getting "INSERT INTO best_rate(name,email) VALUES('','')" as if they're still not coming through
    – Chris
    Apr 20, 2015 at 7:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.