The ajax is not getting the value?-CodePudding

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>

CodePudding user response：

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>