No values being sent to my php script from ajax

Question

Alright, so I am trying to make a [relatively] simple contact form that uses ajax and php to write that data into a database once the form is submitted. I don't get any errors in my javascript or my php but the problem seems to lie within the php not receiving the data that ajax is sending. HTML

<form action="" method="POST" id="contact">
<table>
<tbody>
<tr>
<td><h2>First Name: </h2></td>
<td><h2>Last Name: </td>
<td><h2>Email Address: </td>
</tr>
<tr>
<td><input type="text" name="first_name" placeholder="Johnny"></td>
<td><input type="text" name="last_name" placeholder="Appleseed"></td>
<td><input type="text" name="email" placeholder="johnny@email.com"></td>
</tr>
<tr>
<td><h2>Street Address:</h2></td>
<td><h2>What's Dirty?</h2></td>
</tr>
<tr>
<td><input type="text" name="address"></td>
<td>
<select name="job" form="contact">
<option value="house">House</option>
<option value="roof">Roof</option>
<option value="garage-shed">Garage/shed</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><h2>Message: </h2></td>
</tr>
</tbody>
</table>
<textarea name="message" cols="80" rows="5"></textarea>
<input type="submit" id="submit" name="send" value="Send!" class="send-button">
</form>

Javascript

<script type="text/javascript">
$("#submit").click(function() {
var data_string = $("#contact").serialize();
$.ajax({
type: "POST",
url: "database.php",
data: data_string,
success: function(){
alert(data_string);
}
});
});
</script>

PHP/MySQL

<?php 
$hostname = "foobase.db.9999.foobase.com";
$username = "foobase";
$dbname = "foobase";
$password = "password";
$con =mysqli_connect($hostname, $username, $password);        
//Connecting to  database
mysqli_connect($hostname, $username, $password) OR DIE ("Unable to 
connect to database! Please try again later.");
mysqli_select_db($con, $dbname);

if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
else {
echo "success!";
}

//adding values into the database.
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$wholename = $fname . " " . $lname;
$email = $_POST['email'];
$address = $_POST['address'];
$job = $_POST['job'];
$message = $_POST['message'];
mysqli_query($con, "INSERT INTO client_base (Name, Email, Address, Job)VALUES                       ('$wholename', '$email', '$address', '$job')");

Are you ready to `mysql_injections`? Check here http://stackoverflow.com/questions/60174/how-to-prevent-sql-injection-in-php — Fabio, May 31 '13 at 15:47
Add `print_r($_POST);` at the top of `database.php` to check what info is being posted. You might also want to add `return false;` at the end of your JS submit function. — Marcelo Pascual, May 31 '13 at 15:56
Nelson's answer looks like a good shot. To debug this, I would have opened my browser AJAX viewer (for me, Firefox/Firebug - Chrome and Safari have one built in). Then, activate the AJAX op, and watch it in the live viewer. If the event is not caught and stopped, the normal submission will continue, and the AJAX op will be interrupted. — halfer, May 31 '13 at 19:37

score 3 · Answer 1 · answered May 31 '13 at 15:49

3

In your javascript, change your following line:

$("#submit").click(function() {

for this one:

$("#submit").click(function(e) {
   e.preventDefault();

To prevent your outer <form> to be submitted, as you're doing it with ajax.

answered May 31 '13 at 15:49

Nelson

49,283
8
68
81

@Marcelo I added that line in, and also used halfer 's suggestion of watching the submission in the live viewer, database.php is now receiving the data, but that data isn't being transferred into my database. When I look in the browser live viewer, the database.php file sends: "Array ( ) success!" As you can probably tell, I am new to php and mysql and I am not to familiar with debugging and things of the sort. – sanch Jun 03 '13 at 03:03

No values being sent to my php script from ajax

1 Answers1