update database using AJAX - mysql

Question

I'm trying to update my database using AJAX, but somehow it doesn't work. I have already done the part of getting the data from the database into the input fields.
I have an input field "name":
<form method="post" ACTION="update.php">
<input maxlength="250" NAME="name" id="name" value="SomeName" SIZE="50">
<INPUT TYPE="submit" NAME="submit" id="submit" VALUE="submit">
<span id="error" style="display:none"> Please Enter Valid Data! Did you fill in all the fields?</span>
<span id="success" style="display:none"> the name has been updated successfully!</span>
</form>
And using this code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#submit").click(function() {
var name = encodeURIComponent($.trim($("#name").val()));
var dataString = "name =" + name;
if(name == "")
{
$("#success").fadeOut(2).hide();
$("#error").fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "update.php",
data: dataString,
dataType:'json',
success: function(data)
{
if(!data.error)
{
$("#success").fadeIn(200).show();
$("#error").fadeOut(200).hide();
}
else
{
alert(data.error);
}
}
});
}
return false;
});
});
I'm passing the name to update.php, which is:
<?php
$con = mysql_connect('localhost', 'someUsername', 'somePassword');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("someDatabase", $con);
if(isset($_POST['name']))
{
$name = mysql_real_escape_string($_POST['name']);
$query="UPDATE SOMETABLE SET name ='$name'";
$result = mysql_query($query) or die (mysql_error);
}
else
{
echo "Something wrong with the POST";
}
mysql_close($con);
exit;
?>
I'm getting the error: "Something wrong with the POST";
Thanks in advance.
UPDATE: the problem is not "name" instead of "name =" (which I already have edited). That was just a typing error on here.

Answer 1

var dataString = "name" + name;
this line should be changed to this;
var dataString = "name=" + name;

Answer 2

You use the datatype "json" in the jquery ajax request. And you give only a String to this method.
Change your dataString value to this:
var dataString = {'name':name};
This should work fine ;)

Answer 3

Unless you use turn off the option "processData" you need to pass in an object as data.
See this snippet from the jQuery API:
By default, data passed in to the data option as an object
(technically, anything other than a string) will be processed and
transformed into a query string, fitting to the default content-type
"application/x-www-form-urlencoded". If you want to send a
DOMDocument, or other non-processed data, set this option to false.
http://api.jquery.com/jQuery.ajax/

Answer 4

Your data should be passed as an array (reference), try changing your post to the following:
$.ajax({
type: "POST",
url: "update.php",
data: {
name: name
},
dataType:'json',
success: function(data)
{
if(!data.error)
{
$("#success").fadeIn(200).show();
$("#error").fadeOut(200).hide();
}
else
{
alert(data.error);
}
}
});