Q:

How do I ensure ajax has completed for each value before selecting from array?

So I have a function that is called when a user submits a form, and then does a jquery load to find the corresponding song based on their input and display it.  All this works fine, but I'd like to store these values in an array and do something with them (right now alert just for debugging).  My guess is that the code is sending out "undefined" because it's not waiting for the ajax to complete before checking the array.  SO, how do I fix this? Code below: 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
        //final step is to initialize an array outside the function, fill it in, 
        //then window.out on each part of the array
            function callMe() {
                var hold = new Array();

                for (var i = 0; i < 5; i++) {
                    var b = $('#song'+i).val();
                    var c = $('#artist'+i).val();
                    var d = b + " " + c;
                    $('#'+i).html("Loading...");
                    $('#'+i).load('getInfo.php', {term: d}, function(data){
                        //I have no clue why 5 keeps popping up
                        hold[i] = data;
                        // alert("The number"+i+":"+hold[i]);
                    });       
                }
                for (var i = 0; i<5; i++) {
                    alert(hold[i]);
                }
            }
            $(function() {
                $('form').submit(function() {
                    callMe();
                    return false;
                });
            });
        </script>

A:

Use .done()
$('#'+i).load('getInfo.php', {term: d}, function(data){
     hold[i] = data;
     // alert("The number"+i+":"+hold[i]);
}).done(function(){ /* code goes here */ }); 

SEE HERE

