JQuery warning message on submit form

Question

I am trying to display warning messages in jquery from the client side. Jquery will be called after you click submit. Then the form will invoke the server side php. Here is my code:

FORM

<form action="branch_add_verifier.php" method="POST" id="formAdd">
<input type="text" name="id" id="id">
<input type="submit" value="submit">
</form>

JQuery

$(document).ready(function(){
        var $form = $('#formAdd');
        $form.submit(function(){
            var id= $("#id").val();
            if (id.length < 12) {
                alert("INPUT ERROR");
                return false;
            }

            $.post($form.attr('action'), $(this).serialize(), function(response){
                alert("DATA SUCCESSFULLY ADDED");
            },'json');
            return false;
        });
    });

But the warning message does not appear inside the method. $.post And I also want to know how I can output the warning message from the server side. Here is my sample code:

SERVER

<?php $query = mysqli_query($conn, "SELECT * FROM table1
        INNER JOIN table2
        ON table1.col1= table2.col1

        WHERE table2.col3= '".$_REQUEST['id']."'");

if (mysqli_num_rows($query) != 0) {
    echo "<script>alert('ERROR')</script>";
    return false;
} ?>

So the code above works, but I need to display messages that will tell me if the request is successful or not. Thanks

---

My new problem is that the code below leads me to another page:

FORM

<form action="branch_add_verifier.php" method="POST" id="formAdd">
<input type="text" name="id" id="id">
<input type="submit" value="submit">
</form>

JQuery

$(document).ready(function(){
        $('#formAdd').on('submit', function (e) {
            e.preventDefault();

            var id= $("#id").val();
            if (id.length < 12) {
                alert("INPUT ERROR");
                return false;
            }

            $.ajax({
                context: this,
                url: $(this).attr('action'),
                type: 'POST',
                data: new FormData(this),
                dataType: 'json'
            }).done(function (data) {
                if(data == 'ok') {
                   alert("DATA SUCCESSFULLY ADDED");
                }
                if(data == 'no') {
                   alert("ERROR");
                }
            }).fail(function (data) {
                console.log('failed');
            });
        });
    });

SERVER

$query = mysqli_query($conn, "SELECT * FROM table1
    INNER JOIN table2
    ON table1.col1= table2.col1

    WHERE table2.col3= '".$_REQUEST['id']."'");

    if (mysqli_num_rows($query) != 0) {
    mysqli_close($conn);
    echo json_encode('no');
    return false;
}

I need to return after json_encode, because there are still methods below.

Answer 1

HTML-

<form action="branch_add_verifier.php" method="POST" id="formAdd">
    <input type="text" name="id" id="id">
    <input type="submit" value="submit">
</form>

Script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(function() { 
        $(document).on('submit', "#formAdd", function(e) {
            e.preventDefault();

            $.ajax({  
                url: $(this).attr('action'),
                type: "post",  
                data: $(this).serialize(),
                error:function(){
                    alert("ERROR : CANNOT CONNECT TO SERVER");
                },
                success: function(data) {
                    alert(data);
                }
            });
            return false; 
        });
    });
</script>

PHP :

<?php 
$insert = mysqli_query($conn, "insert query here");
if($insert) {
    echo json_encode('ok');
} else {
    echo json_encode('no');
}
?>

Answer 2

id="id" .

<input type="text" name="id">

$(document).ready(function(){
        var $form = $('#formAdd');
        $form.submit(function(){
            var id= $("#id").val();
            if (id.length < 12) {
                alert("INPUT ERROR");
                return false;
            }

            $.post($form.attr('action'), $(this).serialize(), function(response){
                alert("DATA SUCCESSFULLY ADDED");
            },'json');
            return false;
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="branch_add_verifier.php" method="POST" id="formAdd">
<input type="text" id="id" name="id">
<input type="submit" value="submit">
</form>

Hide result