Ajax form submit not working in PHP - php

Question

When im doing a ajax call to the update.php from profiles.php it go a blank page update.php but it does make the changes if i go back to the profile.php
idk what im doing wrong what im missing??
profile.php
<?php include_once("includes/config.php");
if (isset($_GET['id']))
{
$Nome = $_GET['id'];
$sql = "SELECT * FROM utilizadores WHERE id='$Nome'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
if($row = $result->fetch_assoc()) {
echo'
<br>
<form action="update.php" method="post" id="go" class="go" accept-charset="utf-8">
<div class="content" >
<div class="container-fluid">
div class="row">
<div class="col-md-8">
<div class="card">
<div class="header">
<h4 class="title">Perfil do paciente</h4>
</div>
<div class="content">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Nome</label>
<input type="text" class="form-control" disabled placeholder="Nome" value="'.$row["Nome"].'">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Apelido</label>
input type="text" class="form-control" disabled placeholder="Apelido" value="'.$row["Apelido"].'">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" name="Email "disabled placeholder="Email" value="'.$row["Email"].'">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Idade</label>
<input type="text" class="form-control" disabled placeholder="Idade" value="'.$row["Idade"].'">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Sexo</label>
<input type="text" class="form-control" disabled placeholder="Sexo" value="'.$row["Sexo"].'">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Telefone</label>
<input type="text" class="form-control" disabled placeholder="Telefone" value="'.$row["Telefone"].'">
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>Peso</label>
<input type="text" class="form-control" disabled placeholder="Peso" value="'.$row["Peso"].'Kg">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Altura</label>
<input type="text" class="form-control" disabled placeholder="Altura" value="'.$row["Altura"].'Cm">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Perimetro Abdominal</label>
<input type="text" class="form-control" disabled placeholder="Perimetro abdominal" value="'.$row["Perimetro_abdominal"].'Cm">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Perimetro Anca </label>
<input type="text" class="form-control" disabled placeholder="Perimetro Anca" value="'.$row["Perimetro_anca"].'Cm">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Medicação:</label>
<textarea rows="3" class="form-control" name="Medicacao" placeholder="Medicação" id="Medicacao">'.$row["Medicacao"].'</textarea>
</div>
<input type=hidden name=hidden value="'.$row["id"].' ">
<input type="submit" name="med" class="btn btn-info btn-fill pull-right" value="Atualizar" id="med"></div>
<div class="col-md-6">
<div class="form-group">
<label>Observações:</label>
<textarea rows="3" name="Obs" class="form-control" placeholder="Anotar observações" id="Obs">'.$row["Obs"].' </textarea>
</div>
<input type="submit" name="obs" class="btn btn-info btn-fill pull-right" value="Atualizar">
</div>
</div></form>';
}
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
mysqli_close($conn);
?>
<script type="text/javascript">
$( "#med" ).click(function() {
$.ajax({
type: "POST",
url: "update.php",
success: function(){
alertify.success('campo atualizado com sucesso');
}
});
});
</script>
update.php
include_once("includes/config.php");
if(isset($_POST['med'])) {
$UpdateQuery = "UPDATE utilizadores SET Medicacao='$_POST[Medicacao]' WHERE id='$_POST[hidden]' ";
$res = mysqli_query($conn,$UpdateQuery);
if($res == 1)
{
//header('Location: ' . $_SERVER['HTTP_REFERER'],true, 301 );
}
?>

Answer 1

You are not cancelling the default submit event of your submit button when you handle the click event. That causes the form to be submitted in the normal way as well by going to the url that is set in the action attribute of the form.
Apart from that, you also need to add the data to the ajax request.
This:
$( "#med" ).click(function() {
$.ajax({
type: "POST",
url: "update.php",
success: function(){
alertify.success('campo atualizado com sucesso');
}
});
});
should be:
$( "#med" ).click(function(event) {
// cancel default submit event
event.preventDefault();
$.ajax({
type: "POST",
// add data
data: $('form#go').serialize(),
url: "update.php",
success: function(){
// Do whatever you need to here
console.log('campo atualizado com sucesso');
}
});
});