Dojo equivalent of the following jquery code

Question

I am working on a project that I wanted to use jquery for, however it's come to light that it is mandatory to write in dojo, I've never worked with it before and am having some trouble reading up online as to how to use it.

Below is the code I was using:

<script>
        window.onload = function() {
            getManager($("#team_name").val());  
        }
        
        function getManager(team) {
            $.ajax({
                type: "POST",
                url: "getManager.php",
                data: {team:team}
            }).done(function( manager ) {
                $("#manager_name").val(manager);
            });
        }
</script>

Essentially, there is a drop down <selection> field, when selected (and upon window loading) it should prefill the read-only box below it based upon which team is listed. See the below screenshot for a better idea:

I the above code works fine with jquery, I can't seem to find the equivalent for dojo.

This is the html for the selection field:

<select name="team" id="team_name" onchange="getManager(this.value)" type="text" readonly>

and this is the html code for text input field:

<input name="manager_name" id="manager_name" type="text" readonly/>

The code must be written in dojo as the rest of the page does, unless there is a way to override the dojo with jquery?

Answer 1

window.onload = function() {
    getManager(document.getElementById('team_name').value);  
}

function getManager(team) {
    require(["dojo/_base/xhr"], function(xhr){
        xhr.post({
            url:"getManager.php",
            timeout: 4000,
            content: { team:team },
            load: function( manager ){
                document.getElementById("#manager_name").value = manager;
            }
        });
    });
}

Answer 2

If you are using dojo 1.7 and above no need to use window.onload() or even dojo.addOnLoad() - I think this is what you are looking for

require(['dojo/dom', 'dojo/domReady!', function(dom) {
  getManager(dom.byId('team_name').value); 
});


function getManager(team) {
  require(['dojo/request/xhr', 'dojo/dom'], function(xhr, dom) {
    xhr.post('getManager.php', {
      method: 'POST',
      data: {team: team}
    }).then(function(manager) {
        dom.byId('manager_name').value = manager;
    }, function(error) {
        console.error('couldn\'t fetch manger!');
    });
  });
}

domReady! - is an AMD loaded plugin that will wait until the DOM has finished loading before returning