Skip to content

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>
  <label for="trackingno">Tracking No:</label>
  <input type="tel" id="trackingno" name="trackingno">
  <input type="submit" value="Submit">

Company has provided the API Link

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


They usually use jquery to do this

$('#submit').click(function() {
  const response = $('#response');
  const trackingId = $('#trackingId').val();
  let html = '';
  response.html('Please Wait');
  $.get(''+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 = => {
      return e.status + ' at ' + e.datetime
    html += '<div><strong>Statuses:</strong> <ul><li>'+statuses.join('</li><li>')+'</li></ul></div>';
<script src=""></script>
<div id="response"></div>
<input type="text" id="trackingId"/>
<button type="button" id="submit">Submit</button>