How to use html form to submit API link to get JSON response

I am creating a Package Tracking Form for a courier company.

Here is my html form

<h2>Track Package</h2>

<form>
  <label for="trackingno">Tracking No:</label>
  <input type="tel" id="trackingno" name="trackingno">
  <input type="submit" value="Submit">
</form>

Company has provided the API Link

http://portal.activecourier.pk/api/v1/packet/00003711/status

When I click this link I get this data

{"packet_id": "0024-00003711", "consignee_name": "Nasir maqbool", "destination": "Lahore", "current_status": {"status": "Assigned to Courier", "datetime": "2020-12-27T17:55:05.414Z", "comment": null}, "statuses": [{"status": "Pickup request sent", "datetime": "2020-12-27T09:55:41.295Z", "comment": null}, {"status": "Booked", "datetime": "2020-12-26T10:13:15.333Z", "comment": null}]}

I want to use html form so visitor enters his package tracking # and get his package details

Answer

They usually use jquery to do this

$('#submit').click(function() {
  const response = $('#response');
  const trackingId = $('#trackingId').val();
  let html = '';
  $('#trackingId').val('');
  response.html('Please Wait');
  $.get('http://portal.activecourier.pk/api/v1/packet/'+trackingId+'/status', function(data) {
    html += '<div><strong>Packet Id:</strong> '+data.packet_id+'</div>';
    html += '<div><strong>Consignee Name:</strong> '+data.consignee_name+'</div>';
    html += '<div><strong>Current Status:</strong> '+data.current_status.status+' at '+data.current_status.datetime+'</div>';
    let statuses = data.statuses.map((e) => {
      return e.status + ' at ' + e.datetime
    });
    html += '<div><strong>Statuses:</strong> <ul><li>'+statuses.join('</li><li>')+'</li></ul></div>';

    response.html(html);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="response"></div>
<input type="text" id="trackingId"/>
<button type="button" id="submit">Submit</button>