The ajax is not getting the value? - php

Question

I have the issue when clicking on the register button ,
is not getting the value,
I have made to many researchs i but cant find the answer,
Also i have all the libraries on the menu and
footer pages ,including jquery.
PHP CODE:
<?php
include 'Auth.php';
include 'partials/menu.php';
$usersObj = new Auth();
?>
<h2 class="mt-5 text-center mb-5">View Records
<button data-target="#Registration" data-toggle="modal" class="btn btn-primary" style="float:right;">Add New User</button>
</h2>
<!--Registration Modal-->
<div class="modal" id="Registration">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="text-dark">Add User Form</h3>
</div>
<div class="modal-body">
<p id="message" class="text-dark"></p>
<form>
<input type="text" class="user form-control my-2" placeholder="User Name" id="us">
<input type="text" class="form-control my-2" placeholder="User Email" id="fn">
<input type="password" class="form-control my-2" placeholder="User Password" id="pw">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="btn_register">Register Now</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" id="btn_close">Close</button>
</div>
</div>
</div>
</div>
AJAX CODE:
<?php include 'partials/footer.php'; ?>
<script>
var username = $('#us').val();
var full_name = $('#fn').val();
var password =$('#pw').val();
$(document).on('click','#btn_register',function() {
console.log(username + full_name + password);
})
</script>

Answer 1

You are getting the values before the user enters them, you have to get them when the button is clicked, put your logic in the event handler.
<script>
$(document).on('click','#btn_register',function() {
var username = $('#us').val();
var full_name = $('#fn').val();
var password = $('#pw').val();
console.log(username + full_name + password);
})
</script>