Question

所以我有以下方法根据指定值绘制输入字段：

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
        }

一切正常，一切设置正确，并以正确的方式附加，但是我在输入字段中设置值的部分无效

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

这是我以前的价值观：

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) }}',
};

我知道这不是最好的方法，但是我必须以这种方式使用laravel旧值。我如何为输入字段增加价值？

我得到的是：验证错误后的预期输出：

P.S。旧值正确并显示在console.log上，并且它们在调用drawInputs函数之前已初始化

Answer 1

您可以尝试使用input.value = oldValues [field]

这可能是罪魁祸首，因为如果使用点，则表示该字段实际上是字段。

input.value = oldValues[field];

Answer 2

如此处https://www.w3schools.com/jsref/prop_text_value.asp所述，要设置输入的值，您不应设置属性，而应设置其值

因此，您应该替换这部分代码

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

与此

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

如何为动态创建的输入字段动态设置值？

2 个答案: