如何修改注册的引导代码以检查电子邮件重复？

Question

I am using the default code for a regular contact_me form. It bring success or failure based on the server response (from my understanding). This code calls msend_form.php which takes care of the communication with the database. It returns true at all times. I am able there to check for pre existing email in the db. The question is how can I pass that to ajax code so that it would display an error not only for server response, but for existing email as well. Here is the code in msend_form.js:

    $.ajax({
        url: "././mail/msend_form.php",
        type: "POST",
        data: {
            fname: firstName,
            gender: gender,
            email: email
        },
        cache: false,
        success: function() {
            // Success message
            $('#success').html("<div class='alert alert-success'>");
            $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                .append("</button>");
            $('#success > .alert-success')
                .append("<strong>Thank you for registering! </strong>");
            $('#success > .alert-success')
                .append('</div>');

            //clear all fields
            $('#contactForm').trigger("reset");
        },
        error: function() {
            // Fail message
            $('#success').html("<div class='alert alert-danger'>");
            $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                .append("</button>");
            $('#success > .alert-danger').append("<strong>Sorry " + firstname + ", it seems that my mail server is not responding. Please try again later!");
            $('#success > .alert-danger').append('</div>');
            //clear all fields
            $('#contactForm').trigger("reset");
        },
    })

The code in msend_form.php:

<?php
// insert in sql database
include '../db_connect.php';


// check if fields passed are empty
if(empty($_POST['fname'])       ||
   empty($_POST['email'])       ||
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
   {
    echo "No arguments Provided!";
    return false;
   }

$fname = mysql_real_escape_string($_POST['fname']);
$email_address = mysql_real_escape_string($_POST['email']);
$gender = mysql_real_escape_string($_POST['gender']);
$ip = 1;

$sqlemail=mysql_query('SELECT * FROM `sdusers` WHERE email="'.$email_address.'"');
$res2=mysql_num_rows($sqlemail);

if($res2>=1)
{
    echo 'Email already in use';

}
else
{
    //insert query goes here
    $sql='INSERT INTO `sdusers` (fname, gender, email, ip, time_registered) VALUES ("'.$fname.'","'.$gender.'","'.$email_address.'","'.$ip.'",CURRENT_TIMESTAMP)';
    $res3=mysql_query($sql);

}

mysql_close($link);

return true;            
?>

The code in index.php:

        <form name="sentMessage" id="contactForm" novalidate>
            <div class="row control-group">
                <div class="form-group col-xs-12 floating-label-form-group controls">
                    <label>First Name</label>
                    <input type="text" class="form-control" placeholder="First Name" id="fname" required data-validation-required-message="Please enter your first name.">
                    <p class="help-block text-danger"></p>
                </div>
            </div>
            <div class="row control-group">
                <div class="form-group col-xs-12 floating-label-form-group controls">
                    <label>Email Address</label>
                    <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                    <p class="help-block text-danger"></p>
                </div>
            </div>
            <div class="row control-group">
                <div class="form-group col-xs-12 floating-label-form-group controls">
                    <label>Gender</label>
                    <select id="gender" name="gender" class="form-control">
                        <option value="female">Female</option>
                        <option value="male">Male</option>
                    </select>
                </div>
            </div>

            <br>
            <div id="success"></div>
            <div class="row">
                <div class="form-group col-xs-12">
                    <button type="submit" class="btn btn-outline-dark">Submit</button>
                </div>
            </div>
        </form>

Thanks

UPDATE:

$.ajax({
                url: "././mail/msend_form.php",
                type: "POST",
                data: {
                    fname: firstName,
                    gender: gender,
                    email: email
                },
                dataType: "json",
                cache: false,
                success: function(response) {
                    if(response.status == 1){
                        // ok
                        // Success message
                        $('#success').html("<div class='alert alert-success'>");
                        $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                            .append("</button>");
                        $('#success > .alert-success')
                            .append("<strong>Thank you for registering! We will contact you once this app is deployed soon. </strong>");
                        $('#success > .alert-success')
                            .append('</div>');
                    }else{
                        // fail
                        // Danger message
                        $('#success').html("<div class='alert alert-danger'>");
                        $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                            .append("</button>");
                        $('#success > .alert-danger')
                            .append("<strong>Email address already in use. </strong>");
                        $('#success > .alert-danger')
                            .append('</div>');
                    }


                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Sorry " + firstname + ", it seems that my mail server is not responding. Please try again later!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            })

Answer 1

success callback fired when server respond with 200 status

if you want to say error in error function you need send header 500 (server error) from backend for example

Also you can send bool(int) flag in success response:

{status: 1, message: "email does not exists"}

or

{status: 0, message: "email alredy taken"}

JavaScript:

$.ajax({
    url: "././mail/msend_form.php",
    type: "POST",
    data: {
        fname: firstName,
        gender: gender,
        email: email
    },
    dataType: "json",
    cache: false,
    success: function(response) {
        if(response.status == 1){
            // ok
        }else{
            // fail
        }
    }
});

php

// check for existing email

$email_exists = false; // or true

$json = ['status' => 0, 'message' => 'Email exists']; // default

if(!$email_exists){
    $json['status'] = 1;
    $json['message'] = 'OK';
}

// delete all outputs before header (echo, print_r...)

header("Content-Type: application/json");
echo json_encode($json);
die;