最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - JQuery Display Alert Message on Form Submit - Stack Overflow

programmeradmin1浏览0评论

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.

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.

Share Improve this question edited Oct 28, 2016 at 6:02 Benjamin G asked Oct 28, 2016 at 4:29 Benjamin GBenjamin G 1152 gold badges3 silver badges13 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 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./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');
}
?>

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./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>

发布评论

评论列表(0)

  1. 暂无评论