Update Page without reload AJAX/PHP - php

Question

I'm having some troble with AJAX call to update a page after insert the info in the DB.
I update the form, but i need to update the form after the update.
Need some help, i'm not so good whit javascript.
Thks!
<script>
function chk()
{
var nome=document.getElementById('nome').value;
var dataString= 'nome='+ nome;
$.ajax({
type:"post",
url: default,
data:dataString,
cache:false
//success: function(html){
// $('#msg').html(html);
//}
});
return false;
}
</script>
All the code i use, it's not final and not uptimized, its a form, update the field, and i want to update with the changes, without make a page refresh
<div class="col-md-12 personal-info">
<form class="form-horizontal" role="form" method="post" action="">
<div class="form-group">
<label class="col-lg-4 control-label">Nome:</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="nome" name="nome" value="<?php echo name($resultado); ?>">
<!--<input class="form-control" type="text" value="<?php $nome; ?>">-->
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Apelido:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="<?php echo apelido($chamada); ?>">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Morada:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="<?php echo morada(); ?>">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Código Postal:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="<?php echo codigopostal(); ?>">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Localidade:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="<?php echo localidade(); ?>">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="<?php echo email(); ?>">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Username:</label>
<div class="col-md-8">
<input class="form-control" type="text" value="<?php echo $current_user->user_login ?>">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password:</label>
<div class="col-md-8">
<input class="form-control" type="password" value="11111122333">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Confirm password:</label>
<div class="col-md-8">
<input class="form-control" type="password" value="11111122333">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-8">
<input type="submit" name="submit" class="btn btn-primary" value="Save Changes" onclick="return chk()">
<!--<input type="submit" name="submit" class="btn btn-primary" value="Save Changes">-->
<span></span>
<input type="reset" name="reset" class="btn btn-default" value="Cancel">
</div>
</div>
</form>
</div>
</div>
</div>
<hr>
<!--teste final-->
<?php
global $wpdb;
global $seconddb;
global $current_user;
if ($_POST['submit']){
$new = $_POST['nome'];
$query = $seconddb->query("UPDATE {$wpdb->prefix}sgc_socios SET nome='$new' WHERE email = '{$current_user->user_email}' ");
}
?>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
function chk()
{
var nome=document.getElementById('nome').value;
var dataString= 'nome='+ nome;
$.ajax({
type:"post",
url: default,
data:dataString,
cache:false
//success: function(html){
// $('#msg').html(html);
//}
});
return false;
}
</script>
Thks for the help!