JQuery Display Alert Message on Form Submit

Question

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 $.postmethod 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.

marc_s · Accepted Answer · 2017-02-12 19:42:11Z

3

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

edited Feb 12, 2017 at 19:42

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Oct 28, 2016 at 4:44

Razib Al Mamun

2,7111 gold badge18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Benjamin G Over a year ago

thanks. the code solved my problem but after I press the submit button it directs me to the action url. I need it to stay on the page while calling the server side

Razib Al Mamun Over a year ago

If my answer is helpful for you, please accept my answer and if you face any problem this code please inform me

Razib Al Mamun Over a year ago

after click submit button if redirect form action url you can share your latest submit script. or follow my answer. i used e.preventDefault(); after $('#formAdd').on('submit', function (e) {. if you use e.preventDefault(); it stay on this page while calling the server side.

Benjamin G Over a year ago

I copied your solution but it really does bring me to another page.

Razib Al Mamun Over a year ago

show you latest html form and jqeury submit function please and let me know

|

RJParikh · Accepted Answer · 2016-10-28 04:37:32Z

1

Just you need to put id="id" in input type text.

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

Working Code

$(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>

answered Oct 28, 2016 at 4:37

RJParikh

4,1661 gold badge24 silver badges38 bronze badges

1 Comment

RJParikh Over a year ago

Hope this works fine for you... Please accept the answer if helpful to you... :) @Benjamin G

Collectives™ on Stack Overflow

JQuery Display Alert Message on Form Submit

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related