Untitled


<html>
<head>
    <link rel="stylesheet" href="/css/styles.css" type="text/css">
    <meta charset="utf-8">
    <title>My Form</title>
</head>
<body>
<table class="tab2" border="1">
    <tbody id="body">
    <tr>
        <th>Имя</th>
        <th>Фамилия</th>
        <th>Номер телефона</th>
    </tr>
    <?php
    require_once 'form.php';
    ?>
    <script>
        function AJAX() {
            var request = createRequest();
            sendData(request)

        }

        AJAX()

        function createRequest() {
            return new XMLHttpRequest();
        }

        function sendData(Request) {
            var name = document.getElementById('name');
            var surname = document.getElementById('surname');
            var pn = document.getElementById('pn');
            var body = 'name=' + encodeURIComponent(name) + '&surname' + encodeURIComponent(surname) + '&pn' + encodeURIComponent(pn);
            Request.open("POST", 'form.php', true);
            Request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            checkReadyRequest(Request)
            Request.send(body);
        }

        function checkReadyRequest(request) {
            request.onreadystatechange = function () {
                if (this.readyState != 4) return;

                if (this.status == 200) {
                    {
                        if (this.responseText != null) {
                            document.getElementById('body').innerHTML = this.responseText
                            if (Request.open == true){

                            }
                        } else {
                            alert("Mistake AJAX: Data not found")
                        }
                    }
                } else {
                    alert("Mistake AJAX: " + this.statusText)

                }

            }
        }

    </script>
    </tr>
    </tbody>
</table>
<input type="button" value="Добавить" id="btnTrigger"/>
<input type="button" value="Удалить всё" id="deleteAllRows"/>
<form class="form" action="table.php" method="post" id="form">
    <p>My form</p>
    <fieldset>
        <legend>Запись данных</legend>
        <p><label for="name">Имя <em>*</em></label><input value="Artur" type="text" id="name" name="name"></p>
        <p><label for="surname">Фамилия<em>*</em></label><input value="Borisovskiy" type="text" id="surname"
                                                                name="surname"></p>
        <p><label for="phonenumber">Номер телефона<em>*</em></label><input value="+380969157329" type="text" id="pn"
                                                                           name="pn"></p>
        <input type="submit" value="Добавить" action="form.php" method="post" id="btnAdd"/>

    </fieldset>
</form>
<!--<script src="ajax.js" charset="utf-8"></script>-->
</body>