Kevin Powell - Community•7mo ago

restore input with km

Someone who can help please. I do not understand it any more. I have an attendance list for the cycling club. We have 4 groups; A, B+, B and C. Each group cycles different km. I store all these in the db. together with who cycled with which group. So what do we do: - we enter the date of the day driven - We enter the km for the groups - we indicate the members who participated (which group) This is then stored on the DB. Now I want to make something that if you go back a date. The fields that were completed on that day are visible again. So that we can adjust these if necessary. I have already managed to fill in the checkboxes. But the km remain empty and I cannot enter them. I've tried everything but it doesn't work 😦 I'm desperate. Can someone please help me? Hopefully you understand. If not, feel free to message me! then I try to clarify it. The code can be found in the comments. (text to long) If there's anything else you need to know? Let me know!! Thanks in advance 😄

1 Reply

Rianẍa•7mo ago

This is my code:

  function fillDataBasedOnDate() {
    var selectedDate = document.getElementById("selected_date").value;
    var checkboxPrefixes = ["A", "B+", "B", "C"];
    var url = 'ajax_get_data.php?selected_date=' + selectedDate;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
        data = JSON.parse(xhr.responseText);
        console.log(data); 
            for (var lid_id in data) {
                if (data.hasOwnProperty(lid_id)) {
                    var groepData = data[lid_id];
                    checkboxPrefixes.forEach(function (prefix) {
                        var kilometers = groepData[prefix] && groepData[prefix].kilometers;
                        var checkboxId = 'groep_' + prefix + '_' + lid_id;
                        var checkbox = document.getElementById(checkboxId);
                        if (checkbox) {
                        checkbox.checked = kilometers > 0;
                        } 
                    });
                }
            }
//THIS IS NOT CORRECT
            checkboxPrefixes.forEach(function (prefix) {
                if (groepData[prefix]) {
                    var kilometers = groepData[prefix].kilometers;
                    var kilometersInputId = 'groep_kilometers[' + prefix + ']';
                    var kilometersInput = document.querySelector('input[name="' + kilometersInputId + '"]');
                    if (kilometersInput) {
                        kilometersInput.value = kilometers || '';
                    } else {
                        console.log("Element niet gevonden: " + kilometersInputId);
                    }
                }
            });
        }
    }
    xhr.send();
  }

  function fillDataBasedOnDate() {
    var selectedDate = document.getElementById("selected_date").value;
    var checkboxPrefixes = ["A", "B+", "B", "C"];
    var url = 'ajax_get_data.php?selected_date=' + selectedDate;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
        data = JSON.parse(xhr.responseText);
        console.log(data); 
            for (var lid_id in data) {
                if (data.hasOwnProperty(lid_id)) {
                    var groepData = data[lid_id];
                    checkboxPrefixes.forEach(function (prefix) {
                        var kilometers = groepData[prefix] && groepData[prefix].kilometers;
                        var checkboxId = 'groep_' + prefix + '_' + lid_id;
                        var checkbox = document.getElementById(checkboxId);
                        if (checkbox) {
                        checkbox.checked = kilometers > 0;
                        } 
                    });
                }
            }
//THIS IS NOT CORRECT
            checkboxPrefixes.forEach(function (prefix) {
                if (groepData[prefix]) {
                    var kilometers = groepData[prefix].kilometers;
                    var kilometersInputId = 'groep_kilometers[' + prefix + ']';
                    var kilometersInput = document.querySelector('input[name="' + kilometersInputId + '"]');
                    if (kilometersInput) {
                        kilometersInput.value = kilometers || '';
                    } else {
                        console.log("Element niet gevonden: " + kilometersInputId);
                    }
                }
            });
        }
    }
    xhr.send();
  }

So the first part is correct, it works. It is the 2nd part that does not correspond to the km This is my part of HTML:

<div class="groepen mt-5">
            <div class="row">
                <div class="col-3">
                    <p class="text-center"><b>A</b></p>
                    <input type="text" id="groep_A selected_date" name="groep_kilometers[A]" style="width:100%">
                </div>

                <div class="col-3">
                    <p class="text-center"><b>B+</b></p>
                    <input type="text" id="groep_B+ selected_date" name="groep_kilometers[B+]" style="width:100%">
                </div>

                <div class="col-3">
                    <p class="text-center"><b>B</b></p>
                    <input type="text" id="groep_B selected_date" name="groep_kilometers[B]" style="width:100%">
                </div>

                <div class="col-3">
                    <p class="text-center"><b>C</b></p>
                    <input type="text" id="groep_C selected_date" name="groep_kilometers[C]" style="width:100%">
                </div>
            </div>
        </div>

<div class="groepen mt-5">
            <div class="row">
                <div class="col-3">
                    <p class="text-center"><b>A</b></p>
                    <input type="text" id="groep_A selected_date" name="groep_kilometers[A]" style="width:100%">
                </div>

                <div class="col-3">
                    <p class="text-center"><b>B+</b></p>
                    <input type="text" id="groep_B+ selected_date" name="groep_kilometers[B+]" style="width:100%">
                </div>

                <div class="col-3">
                    <p class="text-center"><b>B</b></p>
                    <input type="text" id="groep_B selected_date" name="groep_kilometers[B]" style="width:100%">
                </div>

                <div class="col-3">
                    <p class="text-center"><b>C</b></p>
                    <input type="text" id="groep_C selected_date" name="groep_kilometers[C]" style="width:100%">
                </div>
            </div>
        </div>

Anyone?

Gaming

Programming

restore input with km