request ajax doesn't work with php validation

Question

I want to use ajax in order to fadeIn a loader during PHP validation and returning the values from it to show visual effect messages, then fadeOut the loader when it finishes. But I did not managed to get a simple return from PHP validation in the .done function.

Can anyone help me please?

Index

<form action="php/valid.php" method="post" id="contact-form">
    <input id="name-contact" class="uk-input uk-width-1-1 uk-margin-small" type="text" name="name" placeholder="Name"><br>
    <input id="email-contact" class="uk-input uk-width-1-1 uk-margin-small" type="text" name="email" placeholder="Email"><br>
    <textarea id="message-contact" class="uk-input uk-textarea uk-width-1-1 uk-margin-small" name="message" placeholder="Message" style="height:200px"></textarea>
    <button id="contact-btn" class="uk-margin-small uk-button uk-button-secondary uk-width-1-1" type="submit" name="contact-form">Send</button>
</form>

JS

$(function() {
    var     data = {
        name: $('#name-contact').val(),
        email: $('#email-contact').val(),
        message: $('#message-contact').val()
    };
    $('#contact-form').on('submit', function(event) {
        $.ajax({
            url: 'php/valid.php',
            type: 'POST',
            dataType: 'json',
            data: data
        })
        .done(function(data) {
            if (data.status == 'success') {
                    console.log('Success !');
            } else if (data.status == 'error') {
                    console.log('Error !');
            }
        })
        .fail(function(error) {
            console.log(error);
        });
    });
});

PHP file

<?
    header('Content-Type: application/json');
    $error = false;
    $regex_name = '#^[\w\s\p{L}-]{2,30}$#iu';
    $regex_message = '#^[\s\S]{3,800}$#i';
    if (isset($_POST['contact-form'])) {
        $name = $_POST['name'];
        $from = $_POST['email'];
        $message = nl2br($_POST['message']);
        if (!empty($name) && !empty($from) && !empty($message)) {
               if (preg_match($regex_name, $name) && filter_var($from, FILTER_VALIDATE_EMAIL) && preg_match($regex_message, $message)) {
                    $error = array('type' => 'success');
               } else {
                    $error = array('type' => 'error', 'value' => 'There are some errors, please check your informations.');
               }
        } else {
            $error = array('type' => 'error', 'value' => 'Some fields are empty, please check your informations.');
        }
    }
    if (isset($error['type']) && $error['type'] == 'success') {
        $return_status['status'] = 'success';
        echo json_encode($return_status);
    }
    else {
        if (isset($error['type']) && $error['type'] == 'error') {
            $return_status['status'] = 'error';
            echo json_encode($return_status);
        }
     }
?>

Thank you.

So what happens when you run your code? Checked the console for errors? Done a console.log(data); in the top of your done() callback? Also, you should add a event.preventDefault() right before you do your ajax request (in the callback for your click event) or it will simply do a regular post to the page and your ajax code would never run. — M. Eriksson
– M. Eriksson, Commented Sep 20, 2018 at 21:13
Btw, the data variable will be set on page load. You should probably move that inside the click event or all values will always be empty. — M. Eriksson
– M. Eriksson, Commented Sep 20, 2018 at 21:15
@MagnusEriksson l change code as the first answer but still have an object error : Object { readyState: 4, getResponseHeader: ...... — Joe278
– Joe278, Commented Sep 21, 2018 at 6:53
readyState: 4 only means that the request is done and doesn't tell us anything else. If you get that in your fail()-callback, then open up the browsers developer tools and go to the "Network"-tab. Make a request and check what the request looks like and what the server returns (the response). — M. Eriksson
– M. Eriksson, Commented Sep 21, 2018 at 7:06
I would also recommend using a relative url from the root folder. You do that by starting the url with a slash: url: '/php/valid.php', if the folder php is in your web root. If it's not, just add the complete path from the web root: url: '/path/to/php/valid.php', — M. Eriksson
– M. Eriksson, Commented Sep 21, 2018 at 7:08

Barmar · Accepted Answer · 2018-09-21 18:48:59Z

1

First, you need to call event.preventDefault() to prevent the form from being submitted normally.

Second, you need to get the values of the inputs in the event handler. Your code is setting data when the page is loaded, before the user has filled in the form.

Third, your PHP script checks for the contact-form parameter. This is sent when you submit the form normally, but your AJAX request isn't setting it. You need to add it to data, or remove if (isset($_POST['contact-form'])) from the PHP (if valid.php is never used for anything else, this check is probably not necessary).

$(function() {
  $('#contact-form').on('submit', function(event) {
    event.preventDefault();
    var data = {
      name: $('#name-contact').val(),
      email: $('#email-contact').val(),
      message: $('#message-contact').val(),
      "contact-form": true
    };
    $.ajax({
        url: 'php/valid.php',
        type: 'POST',
        dataType: 'json',
        data: data
      })
      .done(function(data) {
        if (data.status == 'success') {
          console.log('Success !');
        } else if (data.status == 'error') {
          console.log('Error !');
        }
      })
      .fail(function(error) {
        console.log(error);
      });
  });
});

edited Sep 21, 2018 at 18:48

answered Sep 20, 2018 at 21:42

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

17 Comments

Joe278 Over a year ago

Thanks for your reply! I still have the same object error : Object { readyState: 4, getResponseHeader: ..... And nothing happens, even not console.log(data). Do you have an idea?

Barmar Over a year ago

Check the AJAX response in the Network tab, make sure there's nothing extra around the JSON.

Joe278 Over a year ago

Returning SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

Barmar Over a year ago

All those nested if statements in the PHP are very confusing. Maybe there's a path through them that never echoes any JSON.

Barmar Over a year ago

What do you see in the Response section of the Network tab?

|

aidinMC · Accepted Answer · 2018-09-20 21:28:27Z

0

Change button type to button:

<button id="contact-btn" class="" type="button" name="contact-form">Send</button>

Change your js code like below :

$(document).ready(function () {
    $('#contact-btn').click(function(event) {
        var data = {
            name: $('#name-contact').val(),
            email: $('#email-contact').val(),
            message: $('#message-contact').val()
        };
        $.ajax({
            url: 'php/valid.php',
            type: 'POST',
            dataType: 'json',
            data: data,
            success: function(response) {
                if (response.status == 'success') {
                        console.log('Success !');
                } else if (response.status == 'error') {
                        console.log('Error !');
                } else
                    console.log("Somthing went wrong....")
            },
            error:function(){
                console.log("error");
              }
        });
    });
});

edited Sep 20, 2018 at 21:28

answered Sep 20, 2018 at 21:24

aidinMC

1,4363 gold badges22 silver badges38 bronze badges

1 Comment

Joe278 Over a year ago

Thanks for your reply! I still have the same object error : Object { readyState: 4, getResponseHeader: ..... And nothing happens, even not console.log(data). Do you have an idea?

Collectives™ on Stack Overflow

request ajax doesn't work with php validation

2 Answers 2

17 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related