CODEWITHSUNDEEP
javascriptphpjqueryhtml
RTC222
RTC222

Reputation: 2323

How can I get error message from php in jQuery calling function?

I have an html form with email address, first name, last name and a checkbox. Everything works fine to post the data to my Postgres database, but now I'm filtering the POST data and I jQuery need to intercept an error from php.

For example, this section of the php program filters email address:

if (empty($_POST["email_field"])) {
    $emailErr = "Email is required";
    echo $emailErr;
} else {
    $email = trim($_POST["email_field"]);
    $email = stripslashes($email);
    $email = htmlspecialchars($email);
    echo 'EMail Filtered ' . $email . '!';
    echo PHP_EOL;
    // check if e-mail address is well-formed
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $emailErr = "Invalid email format";
        echo $emailErr;
        echo PHP_EOL;
        return 1;
    }
}

At the point where the program exists with return 1 when it encounters the email error, I want to show an html message to the end user with "Invalid Email Address" but I'm not clear on how jQuery can get that information.

Here's the jQuery function that fires from the onclick even of the submit button and calls the php function to enter form data into the Postgres database: 

<script type="text/javascript">
$("#btn_submit").on("click", function (event) {
    event.preventDefault();
    form_data = $('form').serialize()
    console.log("Okay, I'm starting");
    console.log(form_data);
    console.log("More Info");
    return $.ajax({
        type: "POST",
        url: "collect_data.php",
        data: form_data,
        success: function ( responseText) {
          console.log("Server Reply " + responseText);
        },
        error: function (error) {
          console.log("Server Reply FAIL " + error);
        }
    });
});
</script>

There are a lot of console log messages that do appear in the dev console, but jQuery only gets one. On success, it returns only the first echo message it encounters at the top of the page:

<?php
echo 'Hello ' . htmlspecialchars($_POST["firstname"]) . '!' ;

With the code above, the dev console shows all echo messages up to the point of return, then exits with no error code or anything.

What I need is for the jQuery function get a message from php, but all jQuery shows is an echo of the first line of the program, not any lines below that.

Thanks very much for any help.

EDIT 082119: Per reply from Barmar below, here is the revised code as I have it now, but it doesn't work:

PHP:

$message = '';
$emailErr = '';
if (empty($_POST["email_field"])) {
    $emailErr = "Email is required";
} else {
    $email = trim($_POST["email_field"]);
    $email = stripslashes($email);
    $email = htmlspecialchars($email);
    $message = 'EMail Filtered ' . $email . '!';
    // check if e-mail address is well-formed
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $emailErr = "Invalid email format";
    }
}
  $result = ['success' => empty($emailErr), 'error' => $emailErr,     'message' => $message];
  echo json_encode($result);

HTML:

<script type="text/javascript">
$("#btn_submit").on("click", function (event) {
    event.preventDefault();
    form_data = $('form').serialize()
    console.log("Okay, I'm starting");
    console.log(form_data);
    console.log("More Info");
    return $.ajax({
        type: "POST",
        url: "collect_data.php",
        data: form_data,
        dataType: 'json',
        success: function (response) {
          if (response.success) {
              console.log("Server Reply " + response.message);
          } else {
              console.log("Server error " + response.error);
          }
        },
        error: function (error) {
          console.log("Server Reply FAIL " + error);
        }
    });
});
</script>

Upvotes: 1

Views: 54

Answers (1)

Barmar
Barmar

Reputation: 781868

You should have the script send JSON. Then you can structure it so the client can extract the error message.

$message = '';
$emailErr = '';
if (empty($_POST["email_field"])) {
    $emailErr = "Email is required";
} else {
    $email = trim($_POST["email_field"]);
    $email = stripslashes($email);
    $email = htmlspecialchars($email);
    $message = 'EMail Filtered ' . $email . '!';
    // check if e-mail address is well-formed
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $emailErr = "Invalid email format";
    }
}
$result = ['success' => empty($emailErr), 'error' => $emailErr, 'message' => $message];
echo json_encode($result);

The JS checks the success property:

$("#btn_submit").on("click", function (event) {
    event.preventDefault();
    form_data = $('form').serialize()
    console.log("Okay, I'm starting");
    console.log(form_data);
    console.log("More Info");
    return $.ajax({
        type: "POST",
        url: "collect_data.php",
        data: form_data,
        dataType: 'json',
        success: function (response) {
          if (response.success) {
              console.log("Server Reply " + response.message);
          } else {
              console.log("Server error " + response.error);
          }
        },
        error: function (error) {
          console.log("Server Reply FAIL " + error);
        }
    });
});

Upvotes: 2

Related Questions