Question

Okay, so I’ve been struggling through this problem for a while now and I’ve hit a wall I can’t figure out. I have a page with many forms that a user would insert different types of input which gets submitted to a mySQL database through the below ajax script (this part all works).

Right now, I need certain fields to populate with information that the user has input in other input fields. These fields in HTML are in the form:

<div class="popField" id="client_input_3_0_1_a"><?php echoInput('client_input_3_0_1_a') ?></div>
<div class="popField" id="client_input_3_0_2_a"><?php echoInput('client_input_3_0_2_a') ?></div>

(The echoInput() above is just a function that would load and populate this field when the page loads from the mySQL database, that part works). Here the id matches the id of the user input and its location in the database.

What’s not working is when the user changes some input, this should re-populate one of the fields with their change. Instead of doing this, it seems to only repopulate for the last div to be repopulated on the page, as if the data is fetched in the proper order, but it is only storing in in the last div on the page instead of each respective div. Any thoughts on where I am going wrong?

    // Retrieve all forms of '.formAjax' on the page onChange
    $('.formAjax').change(function () {
        $.post('process.php', $(this).serialize(), function(data) {
            //process.php stores input to mySQL database
        });


        //retrieve divs that need to be populated with input
        var divstopop = document.getElementsByClassName("popField");
        for (var i = 0, n = divstopop.length; i < n; ++i){
            var dbID = divstopop[i].id;
            divstopop[i].innerHTML= divstopop[i].id; //this prints each respective ID correctly
            $.post("populateField.php", {dbID: dbID}, function(returned_data){
                //here populateField.php just retreives data from the database for the id dbID and echoes it back
                //divstopop[i].innerHTML = returned_data; //Does not work at all(?)
                document.getElementById(dbID).innerHTML = dbID + returned_data; 
                //Last div to populated is the only one that changes 
                //and it flashes through what each of the other ones should be populated with
            });
        }

    });
   });

Apologies if I did not make anything clear or if I am missing something very obvious here, my brain is very tired.

Answer 1

You make multiple calls with the same variable. dbID and i are updated while being used by the previous calls. That’s why only the last field is updated, because i and dbID are modified until the last iteration.

You can fix this by creating a new scope

function populateDiv(div) {
    var dbID = div.id;
    div.innerHTML = div.id; //this prints each respective ID correctly
    $.post("populateField.php", {dbID: dbID}, function(returned_data){
        //here populateField.php just retrieves data from the database for the id dbID and echoes it back
        div.innerHTML = returned_data;
    });
}

$('.formAjax').change(function () {
    ...
    for (var i = 0, n = divstopop.length; i < n; ++i)
        populateDiv(divstopop[i]);
    ...
});

As an aside, this is very inefficient. You make n calls to update your fields. You should think about making one call returning the data for all fields and then update the divs from that. This will reduce network traffic as well as the load on your server.