How to display error messages Jquery ajax?

Question

I am a student and am using jquery and php to add records to database. Records are being added, but i want to display a message "Record inserted" in the if the the record has been successfully been added and an error message if an error occurs.

This is my html code:

<form id="forn-newsletter" class="form-horizontal" method="POST">
<div class="form-group">
    <label id="name_label" class="control-label col-xs-2">Name</label>
    <div class="col-xs-10">
        <input type="text" class="form-control" id="news_name" name="news_name" placeholder="Name" onblur="checkName();"/><font color="red"  id="name_error"></font>
    </div>
</div>

<div class="form-group">
    <label id="email_label" class="control-label col-xs-2">Email</label>
    <div class="col-xs-10">
        <input type="text" class="form-control" id="news_email" name="news_email" placeholder="Email" onblur="vali()"/><font color="red"  id="email_error"></font>
    </div>
</div>

<div class="form-group">
    <div class="col-xs-offset-2 col-xs-10">
        <button id="register-newsletter" type="submit" class="btn btn-primary">Register for Newsletter</button>

    </div>
</div>

<div id="dialog"></div>
</form>

This is my registration-newsletter.php

<?php
include('connect.php');

$name=$_POST['name'];
$email=$_POST['email'];
$val=md5($name.$email);
$query = "INSERT INTO newsletter (Id,Name,Email,Val) VALUES('','$name','$email','$val')";


$result=mysql_query($query);
if(!$result){
    echo "Some error Occured..Please try later";
}
else{
    echo "Your details have been saved. Thank You ";
}

mysql_close($con);
?>

This is my JQuery code

$(document).ready(function(){
$("#register-newsletter").click(function(){
    var name=$("#news_name").val();
    var email=$("#news_email").val();

    var dataString="name="+name+"&email="+email;
    var request;
        request = $.ajax({
        url: "registration-newsletter.php",
        type: "POST",           
        data: dataString
        });

    //return false;
});

});

Read $.ajax() documentation and parse the response from PHP, then display respective error messages accordingly. — Raptor
– Raptor, Commented Sep 3, 2014 at 7:32
sidenote: use mysqli_* or PDO and use prepared statements instead, by the way, use the number of inserted rows instead, then send an boolean in a json_encoded return, then just use an if else on the success block — Kevin
– Kevin, Commented Sep 3, 2014 at 7:32
Also, <font> tag is deprecated long long time ago. Use CSS instead. — Raptor
– Raptor, Commented Sep 3, 2014 at 7:34
And you can probably combine the JS validation functions: vali() and checkName(); weird to have 1 JS function for 1 input field — Raptor
– Raptor, Commented Sep 3, 2014 at 7:37

Jenz · Accepted Answer · 2014-09-03 07:37:52Z

3

Add a span to your html code for displaying error.

<span id="error"></span>

Already you are echoing the message from PHP page to ajax. You can do mysql_affected_rows() to check whether the query updated the table.

$result=mysql_query($query);
if(mysql_affected_rows()>0){    // return the number of records that are inserted
   echo "Your details have been saved. Thank You ";    // success
}
else{
    echo "Some error Occured..Please try later";   // failure
}
exit;

Then you can simply show the echoed message in the span with id error as:

request = $.ajax({
        url: "registration-newsletter.php",
        type: "POST",           
        data: dataString,
        success:function(response)     // response from requested PHP page
        {
           $('#error').html(response);  // set the message as html of span
        }
        });

edited Sep 3, 2014 at 7:37

answered Sep 3, 2014 at 7:32

Jenz

8,3718 gold badges50 silver badges83 bronze badges

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

5 Comments

ne1410s Over a year ago

Shouldn't you throw the error and provide a handler for ajax 'error', rather than forcing all responses into a span marked as error?

Hemal Sithul Over a year ago

Nothing is being displayed.

Jenz Over a year ago

are you getting any response from the page. Put an alert after the success:function(response) {

Hemal Sithul Over a year ago

I tried with an alert but the alert is not displayed

Jenz Over a year ago

Was the query successful?

user3789888 · Accepted Answer · 2014-09-03 07:36:20Z

2

  $.ajax({
                url: 'registration-newsletter.php',
                 type: 'post',
                 data:  dataString ,
                 success: function (msg) {
                  alert(msg);
                },
                error:function(msg)
                {
                alert(msg);
                }

            });

answered Sep 3, 2014 at 7:36

user3789888

1231 silver badge2 bronze badges

1 Comment

Raptor Over a year ago

where do you get ../PackAssetMap/GetSubcate ? Totally not related

Sundar · Accepted Answer · 2014-09-03 07:43:04Z

1

jQuery.ajax({
    url: "myfile.php",
    type: "POST",           
    data: dataString,
    success:function(response)     /* this response is an array which is returning from the myfile.php */
    {
    $status = response['status'];
    if($status == 'success')
        {
        $('#message').html(response['msg']);
        }
    else 
        {
        $('#message').html(response['msg']);
        }
    }
    });

The function which you have added success will handle the "text to be append" or "alert to be show". Its quite equal to if condition, If the response came successfully, It will go into the condition.

answered Sep 3, 2014 at 7:43

Sundar

4673 silver badges12 bronze badges

Comments

Ondřej Stašek · Accepted Answer · 2018-02-15 09:53:41Z

This is what worked for me for form submit (see those 2 parameters to .then function):

<span id="result">Loading...</span>
<div id="form">
    <form>
        <input id="personId"> <-- put personID here<br>
        <input id="submit" type="submit" value="Generate">
    </form>
</div>

<script type="application/javascript">
    $(document).ready(function() {
        var submit = $('#submit');
        var res = $('#result');
        $('#form').submit(function() {
            submit.prop('disabled', true);
            res.text("Sending message...");

            $.ajax({
                url: '/rest/message',
                contentType: "application/json;charset=UTF-8",
                method: "POST",
                data: JSON.stringify({'personId': $('#personId').val()})
            }).then(function(result) { // OK
                res.text("Message was generated");
                submit.prop('disabled', false);
            }, function(reason) { // ERROR
                res.css('color', 'red').css('font-weight','Bold');
                res.text("An error has occurred: " + reason.responseJSON.message);
                submit.prop('disabled', false);
            });
            return false; // prevent default action
        });
    });
</script>

Thibault Witzig · Accepted Answer · 2020-12-29 17:44:30Z

0

error: function(xhr) {
    alert(xhr.responseText);
}

You can also get the HTTP status code or the generic message sent by your server (such as "Internal Server Error") in this XHR object if needed. More info : https://api.jquery.com/jQuery.ajax/#jqXHR

answered Dec 29, 2020 at 17:44

Thibault Witzig

2,2103 gold badges21 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to display error messages Jquery ajax?

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related