Trigger JS function on pageload when populating select box from database

Question

I have the following js script that triggers onChange of the select box below. It then retrieves data from a table and returns some input fields populated with the data (using PHP code below). Then saves the data.

This part works fine.

However, if I run the script again, and it populates the selected option from DB and shows as a selected option, but it does not display the populated input fields returned from the PHP code/DB query since I am not triggering the onChange again.

I tried to add 'window.onload = showAgentOne;' under the JS for the onChange function, assuming it would see the value in (str) from the select box, but I am probably missing something as it does not work.

New to JS - I hope this makes sense.

JS:

function showAgentOne(str) {
    if (str == "") {
        document.getElementById("agent1").innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("agent1").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "user_agent1.php?q=" + str, true);
    xmlhttp.send();
}

window.onload = showAgentOne; // trigger function on pageload - not working

HTML:

<select name="narid" onchange="showAgentOne(this.value)" class="form-control">
    <option selected="selected" disabled value="">select agent</option>
    <?php
$sql = "select last_name, first_name, active, nrds_id from ft_form_2 ORDER BY last_name"; 
$sql_result = mysqli_query($mysqli,$sql);                                   
while ($row = mysqli_fetch_array($sql_result)) }?>
        <option value="<?php echo $row[" nrds_id "]; ?>" <?php if($narid_agent1==$ row[ "nrds_id"]) { echo ' selected '; } ?> >
            <?php echo strtoupper($row["last_name"]) . ' > ' . $row["first_name"] . ' ' . $row["last_name"] . ' ['.$active.']'; ?>
        </option>
        <? }  ?>
</select>
<div id="agent1"></div>

PHP (user_agent1.php) ------------------------- $q=$_GET["q"]; $sql="SELECT pay_to_name,nrds_id FROM ft_form_2 WHERE nrds_id = $q"; $result = mysqli_query($mysqli,$sql); while($row = mysqli_fetch_array($result)) { ?>
<input type="text" name="narid_agent1" value="<?php echo $row['nrds_id']; ?>">
<input type="text" name="pay2_agent1" value="<?php echo $row['pay_to_name']; ?>">
<?php } ?>

Answer 1

'window.onload = showAgentOne;' is a good try but it is expecting a str param, otherwise it returns and do nothing. That's why nothing happens.

You will have to try something like

window.onload = function (event) {
    let str = 'ADD_YOUR_VALUE_HERE';
    showAgentOne(str);
}

But I can't help you with what str should be.