Autofill form input values based on Selected option

I need some help. I have my Lot Numbers populating as Options in the Select field correctly.

I need some help writing code to now autofill the expiration date value based on the Lot Number in the API. I know it'll likely use "this" so that it takes the data from that specific object (as well as changes when the select option is updated) but I am rusty and working on refreshing my memory on how to go about it.

Please let me know if you need more information from me and thanks in advance for the help!



// ====== PRODUCT LOT NUMBER API 

function populateOptions(itemData) {
  const item = $('<option>').append(itemData.ProductLot);
  $('.lotNumbers').append(item);
  console.log(item);
}



// Need to write function for autofilling next fields
// On option select get this object's expiration date & vial size values
// Update .expDate and .vialSize input value to this objects values




const apiKey = "xxxxxxxxx";

$(function () {
  $.ajax({
    url: "https://staging.azurewebsites.net/prd_ret_service/api/ProductLots",
    type: "GET",
    dataType: "json",
    headers: { "APIkey": apiKey },
    success: function (data) {
      data.ProductLot.forEach(populateOptions);
      
    }
  });
});

<select  name="product[0][lotNumber]"
                          id="product[0][lotNumber]" required>
                          <option value="" disabled selected>Lot Number</option>
                        </select>

                    <div >
                      <label  for="product[0][expirationDate]">Expiration Date</label>
                      <input 
                        placeholder="Expiration Date" type="text" name="product[0][expirationDate]"
                        id="product[0][expirationDate]" required autocompelete="on" maxlength="254">
                      <div role="alert" >
                        <p>Please enter a valid expiration date.</p>
                      </div>
                    </div>
                    <div >
                      <label  for="product[0][vialSize]">Vial Size</label>
                      <input  placeholder="Vial Size" type="text"
                        name="product[0][vialSize]" id="product[0][vialSize]" required autocompelete="on"
                        maxlength="254">
                      <div role="alert" >
                        <p>Please enter a valid vial size.</p>
                      </div>
                    </div>

API Structure Sample:

[
{
"Id": 1,
"Product": "sample string 2",
"ProductLot": "sample string 3",
"ExpirationDate": "2022-10-20T13:53:32.3636843 00:00"
},
{
"Id": 1,
"Product": "sample string 2",
"ProductLot": "sample string 3",
"ExpirationDate": "2022-10-20T13:53:32.3636843 00:00"
}
]

CodePudding user response：

You'd want to tie a change event to the select element, that will grab the needed API data, and use it to populate the expire dates etc. Something like this...

$('.lotNumbers').change( event => {
  const chosenLotNumber = event.currentTarget.value;
  $.ajax({
    // etc etc
  } );
} );

if your API key is meant to be private (exposes private data, or allows changes to the data not meant to be changed by the public), you will want to instead use server side code to make the API calls, and have your javascript talk to your server side code to get the data. this way your key is not exposed, but you can still get the data with your javascript ajax calls.