ajax form not updating values - php

Question

I've got this form that updates user information on db. However, this functionality is not working with ajax (works with a simple submit with refresh).
This postes form serialized data to the server
jQuery
$('#commit-changes').click(function(){
$('#validation').submit(function(){
$.ajax({
type: "POST",
data: $("#validation").serialize(),
cache: false,
url:"modules/user/updateuser.php",
success : function(data){
$("#response-update").html(data);
},
error:function(){
alert("ERROR");
}
});
});
});
Here's the HTML that outputs the markup
HTML
$rcs_roles = $user->getRoles();
$role ='';
foreach($rcs_roles as $roles)
{
if($roles->role_number == $rcs_user->permissao)
$role .= '<option value="'.$roles->role_number.'" selected="selected">'.$roles->role.'</option>';
else
$role.= '<option value="'.$roles->role_number.'">'.$roles->role.'</option>';
}
if($rcs_user->activo == 0)
{
$activo = '<input type="checkbox" name="activo" class="on_off_checkbox" value="1" />';
}
else
{
$activo = '<input type="checkbox" name="activo" class="on_off_checkbox" checked="checked" value="1" />';
}
$response = '';
$response.='<form id="validation" action="" method="post">
<fieldset >
<input type="hidden" name="user_id"
value="'.$_POST['user_id'].'"/>
<legend>Actualizar Dados Utilizador</legend>
<div class="section ">
<label>Nome<small>Insira o seu nome</small></label>
<div>
<input type="text" class="validate[required,custom[onlyLetterSp]] large" name="nome" id="f_required" value="'.utf8_encode($rcs_user->nome).'">
</div>
</div>';
$response.='<div class="section ">
<label> Email<small>Insira o seu email</small></label>
<div>
<input type="text" class="validate[required,custom[email]] large" name="email" id="e_required" value="'. utf8_encode($rcs_user->email).'">
</div>
</div>';
$response.= '<div class="section">
<label>Permissões<small>Seleccione o tipo de utilizador </small></label>
<div>
<select class="medium" name="role">
'.$role.'
</select>
</div>
</div>
<div class="section">
<label>Activo<small>Activar utilizador</small></label>
<div>
'.$activo.'
<span class="f_help">ON / OFF </span>
</div>
</div>
<div class="section last">
<div>
<a id="commit-changes" class="uibutton submit_form" name="submit" >Gravar</a><a class="uibutton special" onClick="ResetForm()" title="Limpar Formulário" >Limpar Formulário</a>
</div>
</div>
</fieldset></form>';
And then the server side processing
PHP
$response='';
$id_user = $_POST['user_id'];
$name = utf8_encode($_POST['nome']);
$email = utf8_encode($_POST['email']);
$permitions = $_POST['role'];
if(!isset($_POST['activo']))
{
$active = 0;
}
else
{
$active = 1;
}
$user = new Users();
try
{
$user->updateUsers($name, $email, $permitions, $active, $id_user);
$response = "SUCESSO";
}
catch (Exception $e)
{
$response = "ERRO".$e->getMessage();
}
echo $response;
Glad for all the help I can get

Answer 1

From an initial glance, it looks like you aren't waiting until the document has loaded before binding an event handler. This means that #commit-changes doesn't even exist when you try to add the .click event handler.
To fix this in jQuery, wrap this around your entire code:
$(document).ready(function(){
// do stuff
});
This function sends a callback to jQuery's document.ready handler, so that all the code only executes once the page is loaded.

Answer 2

Remove the .submit() function. something like this.
$.post("modules/user/updateuser.php",{data:$("#validation").serialize()},function(response){
$("#response-update").html(response);
});
on the php side try to print_r($_POST['data']); and please post the output.

Answer 3

In the updateUsers function (in Users class) you try to update the field nome or name ?
You are suppose to use nome only right?