After ajax call $_POST['name'] is still undefined

Question

Html Code

<div class="container">
    <?php echo $_POST['name']; ?>
    <form method="POST" id="reg-form" action="register">
        <label>Full Name:</label>
        <input class="register-form-input" type="text" name="name" id="name"><br>
            <label>Username:</label>
        <input  class="register-form-input" type="text" name="username" id="username"><br>
            <label>Email:</label>
        <input  class="register-form-input" type="email" name="email" id="email"><br>
        <label>ID Number:</label>
        <input  class="register-form-input" type="text" name="idnumber" id="idnumber"><br>
            <label>Password:</label>
        <input  class="register-form-input" type="password" name="password" id="password"><br>
            <label for="name">Repeat Password:</label>
        <input  class="register-form-input" type="password" name="password1" id="password1"><br><br>
        <input type="submit"  name="submit"  id="register-submit" onclick="ajax_post();">
    </form>
    <?php echo $_POST['name']; ?>
</div>

Javascript File

function ajax_post(){
    // Create our XMLHttpRequest object
    var hr = new XMLHttpRequest();
    // Create some variables we need to send to our PHP file
    var url = "register/index";
    var name = document.getElementById("name").value;
    var username = document.getElementById("username").value;
    var vars = "name="+name+"&username="+username;
    hr.open("POST", url, true);
    // Set content type header information for sending url encoded variables in the request
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Access the onreadystatechange event for the XMLHttpRequest object
    hr.onreadystatechange = function() {
      if(hr.readyState == 4 && hr.status == 200) {
        var return_data = hr.responseText;
        console.log(return_data);
      }
    }
    // Send the data to PHP now... and wait for response to update the status div
    hr.send(vars); // Actually execute the request
}
document.querySelector('#reg-form').onsubmit=function(){
        return false;
}

Register Controller

<?php 
class Register extends Controller{

    public function __construct(){
        parent::__construct();
        echo $_POST['name'];
    }
    public function index(){
        echo $_POST['name'];
        $this->view->render('register/index',false);
        $this->model->run();
        echo $_POST['name'];
    }
    public function run(){

    }
}

Issue is that When i return Data (ajax Response) in console it shows whole content and everywhere i have written echo $_POST['name'] appears only in console response,on page it's undefined. if you need to explain i'll make it more detailed. just $_POST['name'] is undefined on page,but not in console.

Answer 1

Ajax is not time travel.

This is what happens:

1. You make a request for a page to display in the browser window
2. The value is undefined and shows as such in the page
3. You use JavaScript to make a second, similar request to be handled with JS
4. The value is defined and shows correctly when you log the response

Making a second request does not change history. The results of the first request are unchanged and are still shown in the page.

If you want to load a whole new page, then don't use Ajax.

If you want to modify the page the user is already looking at based on the responce you get to your Ajax request, then you must write JavaScript (in your onreadystatechange function) to manipulate the DOM of the page.