Benjamin G Benjamin G - 1 month ago 9
jQuery Question

JQuery Display Alert Message on Form Submit

I am trying to display alert messages on jquery from the client side. The jquery will be called once the submit button is clicked. The form then will call 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 alert message does not pop up inside the
$.post
method
And I also want to know how I can pop up the alert message from the server side. Here is my sample code:

SERVER SIDE

<?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;
} ?>


In summary, the code above works but I need to display messages that would tell me if the query is successful or not. Thanks




My new problem is that the code below bring 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 the json_encode because there are still methods below that.

Answer

HTML Form

<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>
$(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: $(this).serialize(),
            dataType: 'json'
        }).done(function (data) {
            if(data == 'ok') {
               alert("DATA SUCCESSFULLY ADDED");
            }
            if(data == 'no') {
               alert("ERROR");
            }
        }).fail(function (data) {
            console.log('failed');
        });
    });
});
</script>

PHP server side bellow like that :

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