JQuery Display Alert Message on Form Submit

html, javascript, jquery, php

Solution

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>
    $(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 server side like this:

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

Problem

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.

Original source