CODEWITHSUNDEEP
javascriptphpajaxjquery
Burrows
Burrows

Reputation: 495

Send messages back from PHP file

I'm creating a signup form, and I have it set up such that once the person clicks the submit button, it sends all the form information to a PHP file which then validates everything.

What I'm trying to do is, if multiple inputs have an error, how can I send a message back from the PHP file and display it next to the appropriate input?

Here's what I have so far:

JavaScript:

$(document).ready(function() {
  $(document).on("submit", "form", function(event) {
    event.preventDefault();
    $.ajax({
      url: 'assets/php/verify.php',
      type: "POST",
      data: $(this).serialize(),
      success: function(data) {
        alert(data);
      }
    });
  });
});

PHP:

<?php 
  $username = $_POST["username"];
  $email = $_POST["email"];
  $password = $_POST["password"];
  $errors = array();

  $errors["username"] = "Username not available.";
  $errors["password"] = "Password invalid.";

  echo json_encode($errors);
?>

How would I decode the $errors array and then place the values messages beside each input (for example):

<input name="username" type="text"><div class="message">Username not available.</div>
<input name="password" type="text"><div class="message">Password invalid.</div>

Upvotes: 1

Views: 2605

Answers (4)

Lawrence Cherone
Lawrence Cherone

Reputation: 46602

By using dataType: "json" you tell jQuery your expecting an object in response jQuery will then parse the result as an object that you can access as data.property_key:

jQuery:

$.ajax({
    type: "POST",
    url: 'assets/php/verify.php',
    data: $(this).serialize(),
    success: function(data) {
        if(data.status=="success"){
            $("#message").html('Success, do something');
        }else{
            $("#message_user").html(data.username);
            $("#message_pass").html(data.password);
            $("#message_email").html(data.email);
        }

    },
    dataType: "json"
});

Then change your divs to spans ;p

<input name="username" type="text"><span id="message_user"></span>
<input name="password" type="text"><span id="message_pass"></span>
<input name="email" type="text"><span id="message_email"></span>

<span id="message"></span>

Then your PHP part, bit more validation is required to check for other possible errors. Then dont forget the json header.

<?php 
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    $errors = array();
    //username
    if(!empty($_POST["username"])){
        $username = $_POST["username"];
        //do locic to check username ect
        if(username already found in db){
            $errors["username"] = "Username not available.";
        }
    }else{
        $errors["username"] = "Username required.";
    }

    //email, should also check its a real email
    if(!empty($_POST["email"])){
        $email = $_POST["email"];
    }else{
        $errors["email"] = "Email required.";
    }

    //password
    if(!empty($_POST["password"])){
        $password = $_POST["password"];
    }else{
        $errors["password"] = "Password required.";
    }

    //do if $errors empty
    if(empty($errors)){
        //do somthing all was good
        $responce = array('status'=>'success');

    }else{
        //error
        $responce = $errors;
    }
    //send responce
    header('Content-Type:application/json;');
    echo json_encode($responce);

}
?>

Upvotes: 2

vadim.zhiltsov
vadim.zhiltsov

Reputation: 9574

Do what said Joshua Smock, and don't forget add property to ajax;

$.ajax({
    url: 'assets/php/verify.php',
    type: "POST",
    dataType: "json", // look here
    data: $(this).serialize(),
}). // continue

Upvotes: 1

josh
josh

Reputation: 10308

You could do something like this: 

// js
$.ajax({
    url: 'assets/php/verify.php',
    type: "POST",
    data: $(this).serialize(),
}).then(function(data) {
    if (data['errors']) {
         $.each(data['errors'], function(key, val) {
             $('#error-' + key).text(val);
         });
    }
});

// html
<span id="error-username"></span>

However, this doesn't take into account HTTP error codes, which should be supplied with your form. For example, if the user can't sign up because the server won't process the information (i.e. the information is not valid), you should supply a HTTP 422 unprocessible entity status code, with the JSON. You should only supply a HTTP 200 code if everything is good. Check out the Wikipedia article on the subject.

To set the error code, use the http_response_code function in php. If you do update your program to supply this error code, then you should update your function to reflect it:

$.ajax({
    url: 'assets/php/verify.php',
    type: "POST",
    data: $(this).serialize(),
}).then(function(data) {
    console.log('Success!');
}).fail(function(jqXHR) {
         $.each(jqXHR.responseText['errors'], function(key, val) {
         $('#error-' + key).text(val);
     });
});

Upvotes: 2

Sittikorn Saetiew
Sittikorn Saetiew

Reputation: 9

From what I know, php cannot immediately place an error message back to the webpage. You may want to consider using Ajax for that.

Upvotes: -1

Related Questions