Untitled

<!DOCTYPE html>
    <html>
        <head>
            <title>AJAX Username Check</title>
            <!-- jQuery/Javascripts -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        </head>
        <body>

            <!-- FEEDBACK DIV TO DISPLAY AJAX RESPONSE -->

            <div id="feedback-msg"></div>

            <!-- REGISTER FORM -->

            <form action="app/check.php" method="post" id="reg-form" autocomplete="off">
                <p>
                    <label for="user">Username</label>
                    <input type="text" name="user" placeholder="Username" />
                </p>
                <p>
                    <button type="submit" name="submit">Check Username VIA Ajax</button>
                </p>
            </form>


            <!-- END FORM -->


            <!-- AJAX -->

            <script>
                $(document).ready(function() {

                    $('#reg-form').on('submit', function(event) {
                        event.preventDefault();
                        var form_data = $(this).serialize();
                        $.ajax({
                            url: "app/check.php",
                            method: "POST",
                            data: form_data,
                            dataType: "JSON",
                            success: function(data) {
                                if (data.error != '') {
                                    $('#feedback-msg').html(data.error);
                                }
                            }
                        })
                    });
                });
            </script>
        </body>
    </html>