How to dynamically set value to dynamically created input fields?

Question

So I have following method that draws input fields according to specified value:

function drawInputs() {
            let type = reCalcType.options[reCalcType.selectedIndex].value;
            let container = document.getElementById("form_inputs");
            let fields = getInputsArr(type);
            let localDateTimePickerClass = "update-commission-date-picker";

            //delete all
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }

            //add each input field
            for (let k in fields) {
                let row = document.createElement("div");
                row.setAttribute("class", "row");
                row.setAttribute("style", "margin-left: 5px;");

                let col = document.createElement("div");
                col.setAttribute("class", "col-lg-6 col-mg-6");

                let label = document.createElement("label");
                let input = document.createElement("input");

                if (fields.hasOwnProperty(k)) {
                    let field = fields[k];

                    label.setAttribute("for", field);
                    label.innerHTML = field; //we rewrite it further!

                    input.setAttribute("name", field);
                    input.setAttribute("class", "form-control");

                    if (field === date_begin || field === date_end) {
                        input.setAttribute("class", localDateTimePickerClass + " form-control");
                        input.setAttribute("type", "datetime");
                    } else {
                        input.setAttribute("type", "number");
                    }

                    if (field in oldValues) {
                        input.setAttribute("value", oldValues.field); //todo set value
                    }
                }

                col.appendChild(label);
                col.appendChild(input);
                row.appendChild(col);
                container.appendChild(row);
                container.appendChild(document.createElement("br"));
            }
            $("."+localDateTimePickerClass).datetimepicker({locale: locale, useCurrent: false, format: date_format}) //to init just created date fields
        }

It works fine everything is set correctly and appended the right way, but the part where i set value to the input field not works

if (field in oldValues) {
                        input.setAttribute("value", oldValues.field); //todo set value
                    }

Here my old values:

let oldValues = {
            '{{ \App\Console\Commands\BaseCommand::MERCHANT_ID }}'              : '{{ old(\App\Console\Commands\BaseCommand::MERCHANT_ID) }}',
            '{{ \App\Console\Commands\BaseCommand::DATE_BEGIN }}'               : '{{ old(\App\Console\Commands\BaseCommand::DATE_BEGIN) }}',
            '{{ \App\Console\Commands\BaseCommand::DATE_END }}'                 : '{{ old(\App\Console\Commands\BaseCommand::DATE_END) }}',
};

I know that this is not best way to do it but i have to use laravel old values that way. How i could add value to the input field?

What i get: Expected output after validation error:

PS Old values are correct and displayed on console.log and they initialized before calling drawInputs function

Answer 1

You can try using input.value = oldValues[field]

this maybe the culprit because if you use dot it means the field is literally field.

input.value = oldValues[field];

Answer 2

as reported here https://www.w3schools.com/jsref/prop_text_value.asp to set the value of an input you should not set an attribute but its value

so, you should replace this part of code

if (field in oldValues) {
   input.setAttribute("value", oldValues.field); //todo set value
}

with this

if (field in oldValues) {
    input.value  = oldValues.field; 
}