How to get value from php to input using ajax request

Question

Hi My question is how can I get the value from php script using an ajax with a onclick event.

I have a text field and a button

<button type="button" class="btn btn-primary" onclick="getid(this)">Generate ID</button>
<input type="text" name="pin" class="form-control" readonly>

And here is my php script named getrowcount.php

include_once  'conx.php';

$query ="SELECT * FROM patientprofile";
$result = $DBcon->query($query);
$count = $result->num_rows;

if ($result) {
   if($count >= 0){
       $count_res = $count += 1;
       $idnum = $count_res;
       $test = str_pad($idnum, 5, "0", STR_PAD_LEFT);
    }
}

And now my problem is how can I get the value from $test and put it in the input text field using ajax.

Answer 1

You can use AJAX to display the output from the query in the input field.

Step 1: Add this line of code to the bottom of getrowcount.php:

echo $test;

Step 2: Amend your HTML so that it looks like this:

<form id="get">
   <input type="text" id="pin" name="pin" class="form-control" readonly>
   <input type="submit" class="btn btn-primary" value="Generate ID">
</form>

Step 3: Add this script to the bottom of the page.

<script>
$(document).ready(function(){
    $("form#get").submit(function(event) {
        event.preventDefault();
        var input = $("#pin");

        $.ajax({
            type: "POST",
            url: "getrowcount.php",
            success: function(data) { input.val(data); }
        });
    });
});
</script>