Odtnhj

I a have a HTML form for user registration.

The form requires to user to upload a profile picture.

The picture was previously sent to the server with all other data of the form, but I have to change it, because it's necessary to show a thumb of the picture after the picture is selected by the user.
So, I wrote some javascript code to upload the picture with ajax (other data will be sent when the user submits the form).

The code I wrote in itself does his work (the picture is successfully uploaded and the thumb is rendered in the form), but the problem is that the page is unexpectedly reloaded after the ajax request.

IMPORTANT: I'm not saying that the page of the form action is loaded. I'm saying that the page which contains the form is realoded, and therefore alla data in the form will be lost.

Here below you can read the javascript code concerning the file upload.
As you can see, the code delete all event listeners of all elements of the page thanks to jQuery off() function, to ensure that no event will be fired after the ajax request.
Furthermore, in the event object the propagation is stopped and the default is prevented.

$(document).ready(function() 
 $("img").hover(function() 
 $('.editCV').css("display", "block");
 , function() 
 $('.editCV').css("display", "none");
 );

 document.getElementById("profilePicture").addEventListener("change", onProfilePictureUpload);
);

function onProfilePictureUpload(e) 
 e.stopPropagation();
 e.stopImmediatePropagation();
 e.preventDefault();

 var file_data = $('#profilePicture').prop('files')[0];
 var form_data = new FormData();
 form_data.append('profile', file_data);

 uploadProfilePicture(form_data);


function uploadProfilePicture(formData) 
 var elements = document.querySelectorAll("*");

 for (var k = 0; k < elements.length; k++) 
 $(elements[k]).off();
 

 /*Here above all event listeners of all elements of the page are deleted
 to ensure that page reload is not caused by the fire of an event*/

 $.ajax(
 url: 'post_profile_picture.php', // point to server-side PHP script 
 dataType: 'text', // what to expect back from the PHP script, if anything
 cache: false,
 contentType: false,
 processData: false,
 data: formData,
 type: 'post',
 success: function(picturePath) 
 document.getElementById("profilePictureThumb").src = picturePath;
 
 );

Here below you can read the HTML code, where the form is contained.

<div class="lookfor">
 <form enctype="multipart/form-data" name="myForm" onsubmit="return validateForm()" action="post_nannie.php?email=<?php echo $email ?>" method="POST">
 <div class="need">
 <div class="row">
 <div class="input-field col m4 s12">
 <input disabled type="text" value="<?php echo $row['name']?>">
 <label for="first_name">Nome</label>
 </div>
 <div class="input-field col m4 s12">
 <input disabled type="text" value="<?php echo $row['last_name']?>">
 <label for="first_name">Cognome</label>
 </div>
 <div class="input-field col m4 s12">
 <input disabled type="text" value="<?php echo $row['data']?>">
 <label for="first_name">Giorno di nascita</label>
 </div>
 </div>

 <div class="row">
 <div class="input-field col m4 s12">
 <input disabled type="text" value="<?php echo $row['phone']?>">
 <label for="first_name">Telefono</label>
 </div>
 <div class="input-field col m4 s12">
 <input disabled type="text" value="<?php echo $row['email']?>">
 <label for="first_name">Email</label>
 </div>
 <div class="input-field col m4 s12">
 <input disabled type="text" value="<?php echo $row['skype']?>">
 <label for="first_name">Skype</label>
 </div>
 </div>

 <div class="row">
 <div class="input-field col m3 s12">
 <input disabled type="text" value="<?php echo $row['country']?>">
 <label for="first_name">Nazione</label>
 </div>
 <div class="input-field col m9 s12">
 <input disabled type="text" value="<?php echo $row['adress']?>">
 <label for="first_name">Indirizzo</label>
 </div> 
 </div>

 <div class="row">
 <div class="input-field col m6 s12">
 <h6>Seleziona il tuo stato giuridico</h6>
 <select name="type" required>
 <option value=" " selected>Stato giuridico</option>
 <?php

 foreach ($types as $key => $value) 
 echo' 
 <option value="' . $key . '">' . $value . '</option>
 ';
 
 ?>
 </select>
 </div>
 <div class="input-field col m6 s12">
 <h6>Seleziona la tua nationalità</h6>
 <select name="nation" required>
 <option value=" " selected>Nationalità</option>
 <?php
 foreach ($countries as $value) 
 echo' 
 <option value="'.$value.'">'.$value.'</option>
 ';
 
 ?>
 </select>
 </div>
 <div class="input-field col m6 s12">
 <h6>Quante lingue parli</h6>
 <select name="languages" id="languages" onchange="val()" required>
 <option value=" " selected>0</option>
 <?php
 for ($i=1; $i <= 6 ; $i++) 
 echo'<option value="'.$i.'">'.$i.'</option>';
 
 ?>
 </select>
 </div>
 <div class="input-field col m6 s12" id="uno" style="display: none;">
 <select name="lang_one">
 <option value="" selected>Lingua</option>
 <?php
 foreach ($language as $value) 
 echo' 
 <option value="'.$value.'">'.$value.'</option>
 ';
 ?>
 </select>
 </div>

 <div class="input-field col m6 s12" id="due" style="display: none;">
 <select name="lang_due" >
 <option value="" selected>Lingua</option>
 <?php
 foreach ($language as $value) 
 echo' 
 <option value="'.$value.'">'.$value.'</option>
 ';
 ?>
 </select>
 </div>

 <div class="input-field col m6 s12" id="tre" style="display: none;">
 <select name="lang_tre" >
 <option value="" selected>Lingua</option>
 <?php
 foreach ($language as $value) 
 echo' 
 <option value="'.$value.'">'.$value.'</option>
 ';
 ?>
 </select>
 </div>

 <div class="input-field col m6 s12" id="quattro" style="display: none;">
 <select name="lang_quattro" >
 <option value="" selected>Lingua</option>
 <?php
 foreach ($language as $value) 
 echo' 
 <option value="'.$value.'">'.$value.'</option>
 ';
 ?>
 </select>
 </div> 

 <div class="input-field col m6 s12" id="cinque" style="display: none;">
 <select name="lang_cinque" >
 <option value="" selected>Lingua</option>
 <?php
 foreach ($language as $value) 
 echo' 
 <option value="'.$value.'">'.$value.'</option>
 ';
 ?>
 </select>
 </div>

 <div class="input-field col m6 s12" id="sei" style="display: none;">
 <select name="lang_sei" >
 <option value="" selected>Lingua</option>
 <?php
 foreach ($language as $value) 
 echo' 
 <option value="'.$value.'">'.$value.'</option>
 ';
 ?>
 </select>
 </div>
 </div>
 <div class="row">
 <div class="input-field col l6 m6 s12">
 <input type="checkbox" class="filled-in" name="smoke" onclick="blockMon();sumMon++" id="filled-in-box" />
 <label for="filled-in-box">Fumo</label>
 </div>
 <div class="input-field col l6 m6 s12">
 <input type="checkbox" class="filled-in" name="clean" onclick="blockMon();sumMon++" id="filled-in-box2" />
 <label for="filled-in-box2">Potrei pulire la casa</label>
 </div> 
 </div>
 <div class="row">
 <div class="input-field col l6 m6 s12">
 <input type="checkbox" class="filled-in" name="license" onclick="blockMon();sumMon++" id="filled-in-box3" />
 <label for="filled-in-box3">Ho la patente</label>
 </div>
 <div class="input-field col l6 m6 s12">
 <input type="checkbox" class="filled-in" name="car" onclick="blockMon();sumMon++" id="filled-in-box4" />
 <label for="filled-in-box4">Ho la macchina</label>
 </div> 
 </div>
 <div class="row">
 <div class="input-field col l6 m6 s12">
 <input type="checkbox" class="filled-in" name="reference" onclick="blockMon();sumMon++" id="filled-in-box5" />
 <label for="filled-in-box5">Ho referenze</label>
 </div>
 </div>
 <div class="row">
 <div class="input-field file-field col l6 m6 s12">
 <h6>Inserisci Referenze</h6> 
 <div class="btn">
 <span>File</span>
 <input type="hidden" value="300000">
 <input type="file" name="file">
 </div>
 <div class="file-path-wrapper">
 <input class="file-path validate" type="text">
 </div>
 </div> 
 <div class="input-field file-field col l6 m6 s12">
 <h6>Inserisci la tua foto profilo</h6> 
 <img id="profilePictureThumb" alt="Foto profilo" height="100" src="#">
 <div class="btn">
 <span>File</span>
 <input type="hidden" value="30000"> 
 <input id="profilePicture" type="file" name="profile" accept="image/*" />
 </div>
 <div class="file-path-wrapper">
 <input class="file-path validate" type="text">
 </div>
 </div>
 </div>

 <div class="row">
 <h6>Hai alergie?</h6>
 <div class="input-field col s12">
 <textarea id="textarea1" name="alergies" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, elencale qua sotto</label>
 </div>
 </div>
 <div class="row">
 <h6>Formazione</h6>
 <div class="input-field col m11 s10">
 <textarea id="textarea1" name="study_one" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi il la tua formazione</label>
 </div>

 <div class="input-field col m11 s10" id="study2" style="display: none;">
 <textarea id="textarea1" name="study_due" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi il la tua formazione</label>
 </div>

 <div class="input-field col m11 s10" id="study3" style="display: none;">
 <textarea id="textarea1" name="study_tre" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi il la tua formazione</label>
 </div>

 <div class="input-field col m11 s10" id="study4" style="display: none;">
 <textarea id="textarea1" name="study_quattro" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi il la tua formazione</label>
 </div>

 <div class="input-field col m11 s10" id="study5" style="display: none;">
 <textarea id="textarea1" name="study_cinque" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi il la tua formazione</label>
 </div>

 <div class="input-field col m11 s10" id="study6" style="display: none;">
 <textarea id="textarea1" name="study_sei" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi il la tua formazione</label>
 </div>

 <div class="input-field col m11 s10" id="study7" style="display: none;">
 <textarea id="textarea1" name="study_sette" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi il la tua formazione</label>
 </div>

 <div class="input-field col m11 s10" id="study8" style="display: none;">
 <textarea id="textarea1" name="study_otto" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi il la tua formazione</label>
 </div>

 <div id="topmarginStudy">
 <a class="btn-floating btn-medium waves-effect waves-light" id="topmarginStudy" onClick="clickStudy++;displayStudy()"><i class="material-icons">add</i></a>
 </div>

 </div> 

 <div class="row">
 <h6>Esperienza Lavorativa</h6>
 <div class="input-field col m11 s10">
 <textarea id="textarea1" name="job_one" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
 </div>

 <div class="input-field col m11 s10" id="display1" style="display: none;">
 <textarea id="textarea1" name="job_due" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
 </div>

 <div class="input-field col m11 s10" id="display2" style="display: none;">
 <textarea id="textarea1" name="job_tre" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
 </div>

 <div class="input-field col m11 s10" id="display3" style="display: none;">
 <textarea id="textarea1" name="job_quattro" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
 </div>

 <div class="input-field col m11 s10" id="display4" style="display: none;">
 <textarea id="textarea1" name="job_cinque" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
 </div>

 <div class="input-field col m11 s10" id="display5" style="display: none;">
 <textarea id="textarea1" name="job_sei" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
 </div>

 <div class="input-field col m11 s10" id="display6" style="display: none;">
 <textarea id="textarea1" name="job_sette" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
 </div>

 <div class="input-field col m11 s10" id="display7" style="display: none;">
 <textarea id="textarea1" name="job_otto" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
 </div>

 <div class="input-field col m11 s10" id="display8" style="display: none;">
 <textarea id="textarea1" name="job_nove" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
 </div>

 <div class="input-field col m11 s10" id="display9" style="display: none;">
 <textarea id="textarea1" name="job_dieci" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
 </div>

 <div id="topmargin">
 <a class="btn-floating btn-medium waves-effect waves-light" id="topmargin" onClick="clicks++;displayWork()"><i class="material-icons">add</i></a>
 </div>

 </div>

 <div class="row">
 <h6>Descrizione</h6>
 <div class="input-field col s12">
 <textarea id="textarea1" name="message" class="materialize-textarea"></textarea>
 <label for="textarea1">Per favore, descriviti un po'</label>
 </div>
 </div>

 <button type="submit" class="btn-large waves-effect waves-light teal darken-4 centerDiv">Invia</button>
 </div>
 </form>
</div>

The code (both javascript/jQuery) is contained in a file called "nannie.php", which is the same that is reloaded after each ajax request.

The ajax request is towards "post_profile_picture.php".

The form submit is towards "post_nannie.php".

Here below you can read the entire code of "post_profile_picture.php".

<?php

$profile=$_FILES['profile']['name'];
$profile = str_replace(' ', '', $profile);
$profile = utf8_decode($profile);

if (isset($_FILES['profile']['name'])) 
 //percorso della cartella dove mettere i file caricati dagli utenti
 $uploaddirPro = '../file/profile/';
 //echo $uploaddir; echo "<br>";
 //Recupero il percorso temporaneo del file
 $userfile_tmpPro = $_FILES['profile']['tmp_name'];
 //echo $userfile_tmp; echo "<br>";
 //recupero il nome originale del file caricato
 $userfile_namePro = $profile;
 //echo $userfile_tmp;
 //echo $userfile_name; echo "<br>";
 //echo $_FILES[$field]['error'];echo "<br>";

 move_uploaded_file($userfile_tmpPro, $uploaddirPro . $userfile_namePro);

 echo $uploaddirPro . $userfile_namePro;