PHP show error message on ajax submission

Question

I am php beginner. I am submitting a form using ajax call. So after submission of the form user stay on the same page and do not go to reserve_seat.php since ajax call.

<form action="reserve_seat.php" method="POST">
First name:<br>
<input type="text" name="name" value="Mickey">
<br>
Email:<br>
<input type="text" name="email" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<script>
      $(function () {
        $('form').on('submit', function (e) {
          e.preventDefault();
          $.ajax({
            type: 'post',
            url: 'reserve_seat.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
        });
      });
    </script>

Now after submission of the form I do some validation for email and if the email validation fail I want to show an error message above the form. May be insert a div showing that email not valid. How can I do that? My validation code below

    if( !empty($_POST['name']) && !empty($_POST['email'])){
        $name = $_POST['name'];
        $email = $_POST['email'];

        if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $insert = 'INSERT into reservation(name,email) VALUES ("'.$name.'", "'.$email.'")';
        mysql_query($insert);
         } else {
        //need help here to show error message 
}
    }

What does your ajax call to reserve_seat.php return based on success or failure? You'd need to return something there first, then inside your success callback you can perform an action(s), show div with error message, etc. — Michael Hommé
– Michael Hommé, Commented Nov 21, 2014 at 22:24
please use prepared statements, your command is suffering from sql injections: en.wikipedia.org/wiki/SQL_injection. That means someone could execute arbitrary commands in your sql server. — lx42.de
– lx42.de, Commented Nov 21, 2014 at 22:27

paulgv · Accepted Answer · 2014-11-21 22:29:51Z

$.ajax will get a response in its success method :

<script>
  $(function () {
    $('form').on('submit', function (e) {
      e.preventDefault();
      $.ajax({
        type: 'post',
        url: 'reserve_seat.php',
        data: $('form').serialize(),
        success: function (data) {
          alert(data); // Alerts server response
        }
      });
    });
  });
</script>

You just need to actually send a response server side, you could simply echo a message with PHP :

if( !empty($_POST['name']) && !empty($_POST['email'])){
  $name = $_POST['name'];
  $email = $_POST['email'];

  if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $insert = 'INSERT into reservation(name,email) VALUES ("'.$name.'", "'.$email.'")';
    mysql_query($insert);
  } else {
    echo "This message will be available in success method";
  }
}

RNK · Accepted Answer · 2014-11-21 22:25:42Z

0

HTML

<span id='error_message'></span>

In your ajax success:

success: function (res) {
    $('#error_message').text('');
    $('#error_message').text(res);
}

PHP (reserve_seat.php)

echo the error message, based on your requirement/condition. In your case,

if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $insert = 'INSERT into reservation(name,email) VALUES ("'.$name.'", "'.$email.'")';
    mysql_query($insert);
} else {
    echo "Invalid Email";
}

answered Nov 21, 2014 at 22:25

RNK

5,79211 gold badges71 silver badges143 bronze badges

2 Comments

asdfkjasdfjk Over a year ago

how can I echo the error message? html code is in index.php file

RNK Over a year ago

just try the way it is. in your current code, you are not taking response from ajax.

Collectives™ on Stack Overflow

PHP show error message on ajax submission

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related