Ajax - error messages with echo Solved

Question

Hello everyone,

I have a small problem with Ajax, I have a form that sends data to my database DDB via Ajax

But the issue is that I can no longer display error messages with echo "..."; since the page no longer refreshes.
When a user inserts a duplicate email address,
I would like to know how to display error messages; I was told to make an Ajax request but I don't have a clue how to do that, thanks in advance.

<?php 

if($_POST) {
 // database connection
 $server = '127.0.0.1';
 $username = 'root';
 $password = '';
 $dbname = 'base';

 $conn = new mysqli($server, $username, $password, $dbname);

 // check db connection error message DOES NOT WORK :( I don't know why?
 
 if($conn->connect_error) {
 die("Connection Failed: " . $conn->connect_error);
 } 
 else {
 // echo "Successfully Connected";
 }

 $valid = array('success' => false, 'messages' => array());

 $name = $_POST['fullName'];
 $lastname = $_POST['lastname'];
 $email = $_POST['email'];

 $type = explode('.', $_FILES['userImage']['name']);

$type = $type[count($type) - 1];
 $url = '/uploads/files/' . uniqid(rand()) . '.' . $type;

 if(in_array($type, array('gif', 'jpg', 'jpeg', 'png'))) {
 if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
 if(move_uploaded_file($_FILES['userImage']['tmp_name'], $url)) {

//****************************************************************** 
// Check for duplicate email before form validation
 
 $sql = "SELECT * FROM visitor WHERE email = '$email' ";
 $result = $conn->query($sql);
 $row = $result -> fetch_array(MYSQLI_ASSOC);
 
 if (empty($row)){
 // In this case, the query returned nothing..

}else{
 echo "The email already exists!";
 } 
 // In this case, AJAX ALERT .. DOES NOT WORK :( I don't know why?
 // ****************************************************** 

// Insert into database
 $sql = "INSERT INTO visitor (Name, email, Image) VALUES ('$name','$email','$url')";

 if($conn->query($sql) === TRUE) {
 $valid['success'] = true;
 $valid['messages'] = "Successfully Uploaded";
 
 // In this case, AJAX ALERT .. WORKS :) 
 // ****************************************************** 
 } 
 else {
 $valid['success'] = false;
 $valid['messages'] = "Error during upload";
 }
// In this case, AJAX ALERT .. DOES NOT WORK :( I don't know why?
 // ****************************************************** 
 $conn->close();

 }
 else {
 $valid['success'] = false;
 $valid['messages'] = "Error while uploading";
 }
 }
 }

 echo json_encode($valid);

 // upload the file 
}

Configuration: Windows / Chrome 86.0.4240.183

jordane45 · Answer

You need to replace the ECHO (and the DIE)
with the use of variables

 $valid['success'] = false; $valid['messages'] = "The email already exists!";

Your Ajax script in JS must certainly have the parameter datatype:"json"
So... you absolutely need to return JSON ...

You should have seen it..... if, in your Ajax call, you had managed the error or the fail in your JSON

PS: In the future, please specify the language in the code tags.
Complete explanations available here: https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

.

--
Best regards,
Jordane

lina-24 · Answer

Code Java Script Code HTML

email

Photo

Code PHP connect_error) { die("Connection Failed : " . $conn->connect_error); } else { // echo "Successfully Connected"; } $valid = array('success' => false, 'messages' => array()); $name = $_POST['fullName']; $lastname = $_POST['lastname']; $email = $_POST['email']; $type = explode('.', $_FILES['userImage']['name']); $type = $type[count($type) - 1]; $url = '/uploads/files/' . uniqid(rand()) . '.' . $type; if(in_array($type, array('gif', 'jpg', 'jpeg', 'png'))) { if(is_uploaded_file($_FILES['userImage']['tmp_name'])) { if(move_uploaded_file($_FILES['userImage']['tmp_name'], $url)) { //****************************************************************** // Vérification doublon email avant validation du formulaire $sql = "SELECT * FROM visitor WHERE email = '$email' "; $result = $conn->query($sql); $row = $result -> fetch_array(MYSQLI_ASSOC); if (empty($row)){ // dans ce cas, la requete n'a rien retourné.. }else{ $valid['success'] = false; $valid['messages'] = "L'email existe déjà !"; } // dans ce cas, ALERTE AJAX .. NE MARCHE PAS :( je ne sais pas pourquoi? // ****************************************************** // Insérer dans la base de données $sql = "INSERT INTO visitor (Name, email, Image) VALUES ('$name','$email','$url')"; if($conn->query($sql) === TRUE) { $valid['success'] = true; $valid['messages'] = "Téléchargement réussi"; // dans ce cas, ALERTE AJAX .. MARCHE :) // ****************************************************** } else { $valid['success'] = false; $valid['messages'] = "Erreur lors du telechargement"; } // dans ce cas, ALERTE AJAX .. NE MARCHE PAS :( je ne sais pas pourquoi? // ****************************************************** $conn->close(); } else { $valid['success'] = false; $valid['messages'] = "Erreur lors du téléversement"; } } } echo json_encode($valid); // téléverser le fichier }

lina-24 · Answer

I'm really struggling; the web is too hard :(

jordane45 · Answer

Commence par modifier ton appel ajax comme ceci $.ajax({ url: form.attr('action'), type: form.attr('method'), data: formData, dataType: 'json', cache: false, contentType: false, processData: false, async: false, success:function(response) { console.log("Reponse ajax",response); var success = typeof(response)!='undefined' && typeof(response.success)!='undefined' ? response.success : null; var msg = typeof(response)!='undefined' && typeof(response.messages)!='undefined' ? response.messages : ""; if(success == true) { $("#messages").html('

'+ ''+ msg + '

'); $('input[type="text"]').val(''); $(".fileinput-remove-button").click(); } else { $("#messages").html('

'+ ''+ msg + '

'); } }, error: function(xhr, ajaxOptions, error){ console.log('ERREUR AJAX',xhr, ajaxOptions, error); var errorMessage = xhr.status + ': ' + xhr.statusText alert('Error - ' + errorMessage); } }); et côté PHP, je pense que tu peux remplacer ton code par : connect_error) { $valid['success'] = false; $valid['messages'] = "Connection Failed : " . $conn->connect_error; echo json_encode($valid); exit; } //recupération PROPRE des variables AVANT de les utiliser $name = !empty($_POST['fullName']) ? $_POST['fullName']: NULL; $lastname = !empty($_POST['lastname']) ? $_POST['lastname']: NULL; $email = !empty($_POST['email']) ? $_POST['email']: NULL; $valid = array('success' => false, 'messages' => array()); $userImage = !empty($_FILES['userImage']) ? $_FILES['userImage'] : NULL; if(!$userImage ){ $valid['success'] = false; $valid['messages'] = "Aucun fichier à uploader !"; echo json_encode($valid); exit; } $ext = end(explode('.', $fileName)); $url = '/uploads/files/' . uniqid(rand()) . '.' . $ext; if(in_array($ext, array('gif', 'jpg', 'jpeg', 'png'))) { if(is_uploaded_file($userImage['tmp_name'])) { if(move_uploaded_file($userImage['tmp_name'], $url)) { //****************************************************************** // Vérification doublon email avant validation du formulaire $sql = "SELECT * FROM visitor WHERE email = '$email' "; $result = $conn->query($sql); $row = $result->fetch_array(MYSQLI_ASSOC); if (empty($row)){ // dans ce cas, la requete n'a rien retourné.. // Insert into database $sql = "INSERT INTO visitor (Name, email, Image) VALUES ('$name','$email','$url')"; if($conn->query($sql) === TRUE) { $valid['success'] = true; $valid['messages'] = "Successfully Uploaded"; // dans ce cas, ALERTE AJAX .. MARCHE :) // ****************************************************** } else { $valid['success'] = false; $valid['messages'] = "Erreur lors du l'insertion en bdd"; } } else { $valid['success'] = false; $valid['messages'] = "L'email existe déjà !"; } } else { $valid['success'] = false; $valid['messages'] = "Error while uploading"; } } } $conn->close(); echo json_encode($valid); exit; ?> Puis vide le cache de ton navigateur et refait un essai. Et si ça ne marche toujours pas, fais une capture de la CONSOLE de ton navigateur et montre la nous. PS: Je te rappelle que pour débuguer de l'ajax, je te recommande fortement d'utiliser le navigateur firefox ... et surtout.. n'oublie pas d'activer le debugage XHR -- Cordialement, Jordane

lina-24 · Answer

Hello
I've modified the Ajax call you sent.
It doesn't work :( Plus, the thumbnail display is gone!
I think the Ajax script belongs to the upload image button with the image preview.
Shouldn't we also create another Ajax call for the email input field?

jordane45 · Answer

The error is located on line 13 of the JavaScript code I provided you, as you can see there is an extra dot, which is due to a typo on my part.  -- Best regards, Jordane

lina-24 · Answer

Please excuse me for the inconvenience, Jordane45 :( here is my screenshot with XHR Debugging

lina-24 · Answer

Hello Jordane45
I can't figure out this script that isn't working anymore :( Is it possible to clean it up for me and turn it into basic HTML without any JavaScript or CSS (raw script with error messages in echo)? I would be grateful if you could.

Ajax - error messages with echo

8 réponses

Upload Image

Epson printer prints unexpectedly

Texture issues in enshrouded

Announcement: online source code archive

Text messages from 36111

Tomb raider anniversary on wii

Notice shows wr30 m

Search for a song in the series foudre

Help for programming came remote control

Windows 10 reset issues

Where is the house wii sport resort wii