Trying to update a database via AJAX and Jquery - php

Question

I'm trying to achieve something basic, where you submit a form with a weight and it updates my database via ajax.
I've been looking through some of the answered questions for guidance but I just can't figure out why the below code doesn't work.
looking in chrome developer tools it look like it's not even submitting the form properly, so I don't think its the php script that's the issue (although it may have other issues once I fix the first problem).
Any help with fixing this would be much appreciated.
Here's the form and Ajax code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$("#weight_tracker_form").submit(function() {
$.ajax({
type: "POST",
url: "../weight_tracker_process.php",
data: {
weight: $("#weight").attr("value"),
},
success: function(){
alert("success");
},
error: function(){
alert("error");
}
});
return false;
});
</script>
<h2>Weight Tracker</h2>
<form id="weight_tracker_form" method="post">
Date: <input autofocus id="date" name="date" type="date"/>
Weight: <input id="weight" name="weight" type="text"/> Kg
<input type="submit" value="Submit Weight">
</form>
And here's the script weight_tracker_process.php
<?php
// configuration
require("includes/config.php");
if ($_POST["weight"] == NULL)
{
apologize("Please enter an email");
}
$weight = mysql_real_escape_string($_POST["weight"]);
$date = mysql_real_escape_string($_POST["date"]);
if (query("INSERT INTO weight (user_id, weight_measurement) VALUES (?, ?)", $_SESSION["id"], $weight); == false){
echo "Update Error";
}
else {
echo "Success";
}
?>
Thanks!

Answer 1

If this is your exact code, then what's probably happening is the handler isn't being attached to the form element. The JavaScript code is before the form, so when it runs the form doesn't exist yet. So this selector returns an empty array:
$("#weight_tracker_form")
You'll want to wait until the DOM is finished loading before assigning the event handler:
$(function () {
$("#weight_tracker_form").submit(function() {
$.ajax({
type: "POST",
url: "../weight_tracker_process.php",
data: {
weight: $("#weight").attr("value"),
},
success: function(){
alert("success");
},
error: function(){
alert("error");
}
});
return false;
});
});
Wrapping it in the jQuery function like this will cause it to wait until the document's ready event fires.

Answer 2

Try switch this:
weight: $("#weight").attr("value");
For this:
weight: $("#weight").val();
Also, you put the code on in document.ready. Like this:
$(document).ready(function({
$("#weight_tracker_form").submit(function() {
$.ajax({
type: "POST",
url: "../weight_tracker_process.php",
data: {
weight: $("#weight").attr("value"),
},
success: function(){
alert("success");
},
error: function(){
alert("error");
}
});
return false;
});
}));

Answer 3

Thanks guys, initial problem was as you suggested with me forgetting to wait for the dom to load before executing the script.
Second problem was some small bracket and syntax errors in the script.
Final code is below
HTML / Jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#weight_tracker_form").submit(function() {
$.ajax({
type: "POST",
url: "weight_tracker_process.php",
data: {
weight: $("#weight").val()
},
success: function(){
alert("success");
},
error: function(){
alert("error");
}
});
return false;
});
});
</script>
<h2>Weight Tracker</h2>
<form id="weight_tracker_form" method="post">
Date: <input autofocus id="date" name="date" type="date"/>
Weight: <input id="weight" name="weight" type="text"/> Kg
<input type="submit" value="Submit Weight">
</form>
Log Out
PHP
<?php
// configuration
require("includes/config.php");
// if form was submitted
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
if ($_POST["weight"] == NULL)
{
echo "Error";
}
$weight = mysql_real_escape_string($_POST["weight"]);
if (query("INSERT INTO weight (user_id, weight_measurement) VALUES(?, ?)", $_SESSION["id"], $weight) == false){
echo "Update Error";
}
else {
echo "Success";
}
}
else
{
// else render form
printf("error");
}
?>

Answer 4

I also suggest to use jQuery.serialize() method to post all the fields from broser to the server.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#weight_tracker_form").submit(function() {
$.ajax({
type: "POST",
url: "../weight_tracker_process.php",
data: $("#weight_tracker_form").serialize(),
success: function(){
alert("success");
},
error: function(){
alert("error");
}
});
debugger;
return false;
});
});
</script>
</head>
<body>
<h2>Weight Tracker</h2>
<form id="weight_tracker_form" method="post">
Date: <input autofocus id="date" name="date" type="date"/>
Weight: <input id="weight" name="weight" type="text"/> Kg
<input type="submit" value="Submit Weight">
</form>
</body>
</html>