javascript ajax php Submit Form without loading page

[techieoriname]

Please am using rave api to resolve account details i don't want the page to load i want to collect one detail from the json response without loading the page before saving to mysql database

This is the url https://ravesandboxapi.flutterwave.com/flwv3-pug/getpaidx/api/resolve_account

{
  "recipientaccount": "0690000034",
  "destbankcode": "044",
  "PBFPubKey": "FLWPUBK-4e9d4e37974a61157ce8ca4f43c84936-X"
}

thats an example of the json data sent

And here is the response below

{
  "status": "success",
  "message": "ACCOUNT RESOLVED",
  "data": {
    "data": {
      "responsecode": "00",
      "accountnumber": "0690000034",
      "accountname": "Ade Bond",
      "responsemessage": "Approved Or Completed Successfully",
      "phonenumber": null,
      "uniquereference": "FLWT00976651",
      "internalreference": null
    },
    "status": "success"
  }
}

I want to collect the "accountname" and display on the form without reloading the page

<form action="" method="POST">

<input type="text" name="recipientaccount">

<input type="text" name="destbankcode">

after entering the destbankcode i want the account name from the response display in the next field without reloading the page

<input type="text" name="accountname" value="" disabled>

<input type="submit" value="Submit"> 

[justsomeguy]

If you don't want to reload the page then, assuming both pages are on the same domain (your page is also on ravesandboxapi.flutterwave.com), you can send an ajax request for that JSON data and modify the page when the response comes back.  If it's on a different server then you need to use a server-side language to send the request, get the response, and then build the page.