无法在Chrome上显示预填充的输入值- FF工作正常

cannot display the pre-filled input values on Chrome - FF works fine

本文关键字:输入 FF 工作 填充 Chrome 显示      更新时间:2023-09-26

我有一个表单,用户可以在开始时输入一些值,从那时起,每当用户回到网站时,所有的值都将被预填充。输入值在FF上显示得很好。但是,如果我使用Chrome浏览器,我无法看到这些值。

JS(我已经包含了所有的代码,但有问题的部分是在(添加值的输入元素段的代码)

function drawPaymentDetailsTab(bankInfoMap, playerDetailsMap) {
    // Clear the bank_ul
    $.each(bankInfoMap, function(index, value) {
        var provider = value.provider,
            methodId = value.method;
        // Appending select option
        var option = document.createElement("option");
        option.text = getPaymentDetailsSelection(provider, methodId);
        option.value = provider + '_' + methodId;
        document.getElementById("selectedBankAccountType").appendChild(option);
        // Stylize bank account type dropdown (if needed)
        if(styledInputs) {
            setTimeout(function() {
                stylizeDropdown("#selectedBankAccountType",10);
            }, 10);
        }
        // Appending div element
        var selectionDiv = document.createElement('div');
        selectionDiv.id = provider + '_' + methodId;
        selectionDiv.style = "display:none";
        document.getElementById("bank_ul").appendChild(selectionDiv);
        // Appending li elements to div
        $.each(value.fields, function(index, fieldsMap) {
            var mainFieldName = fieldsMap.field,
                maxLength = fieldsMap.maxLength;
            var fieldLi = document.createElement('li');
            fieldLi.id = provider + '_' + methodId + '_' + mainFieldName + '_li';
            fieldLi.className = 'form-group has-feedback';
            document.getElementById(provider + '_' + methodId).appendChild(fieldLi);
            // Appending label for the input field
            var inputLabel = document.createElement('label');
            inputLabel.id = mainFieldName + '_label';
            inputLabel.className = 'control-label col-sm-3';
            inputLabel.for = mainFieldName;
            inputLabel.innerHTML = getProviderExtraInfo(provider, methodId, mainFieldName);
            if (!fieldsMap.optional) {
                inputLabel.innerHTML += (fieldsMap.dependent == null) ? ' *' : ' (*)';
            }
            document.getElementById(provider + '_' + methodId + '_' + mainFieldName + '_li').appendChild(inputLabel);
            // Appending wrapper for the input field (bootstrap)
            var inputWrapper = document.createElement('div');
            inputWrapper.id = mainFieldName + '_wrapper';
            inputWrapper.className = 'col-sm-9';
            document.getElementById(provider + '_' + methodId + '_' + mainFieldName + '_li').appendChild(inputWrapper);
            // Appending input element to wrapper
            if (fieldsMap.fieldType == "text") {
                var fieldInput = document.createElement('input');
                fieldInput.type = "text";
                fieldInput.id = mainFieldName;
                fieldInput.className = 'form-control';
                if (maxLength != null) fieldInput.maxLength = maxLength;
                // Uppercase for bic and account fields
                if (mainFieldName == "ibanAccount" || mainFieldName == "ibanBic" || mainFieldName == "bankBic") fieldInput.style.textTransform = "uppercase";
                document.getElementById(mainFieldName + '_wrapper').appendChild(fieldInput);
                // Adding value to the input element
                if(playerDetailsMap[mainFieldName] != null) $("#"+mainFieldName).val(playerDetailsMap[mainFieldName]);
                // Assigning default value
                if ($("#"+mainFieldName).val().length == 0 && fieldsMap.defaultValue != null) $("#"+mainFieldName).val(fieldsMap.defaultValue);
            }
            // Appending wrapper for the feedback (bootstrap)
            var feedbackWrapper = document.createElement('div');
            feedbackWrapper.id = mainFieldName + '_feedback_wrapper';
            feedbackWrapper.className = 'form-control-feedback';
            document.getElementById(mainFieldName + '_wrapper').appendChild(feedbackWrapper);
            // Appending additional elements for feedback wrapper
            var hintImg = document.createElement('img');
            hintImg.title = getProviderHintInfo(provider, methodId, mainFieldName);
            hintImg.alt = '?';
            hintImg.src = '/cms/images/icons/what.png';
            document.getElementById(mainFieldName + '_feedback_wrapper').appendChild(hintImg);
            var spanOk = document.createElement('span');
            spanOk.id = mainFieldName + '_validOK';
            document.getElementById(mainFieldName + '_feedback_wrapper').appendChild(spanOk);
            // Appending error div element to wrapper
            var errorDiv = document.createElement('div');
            errorDiv.className = "bankFieldError help-block error-field";
            errorDiv.id = mainFieldName + "_errorMess";
            document.getElementById(mainFieldName + '_wrapper').appendChild(errorDiv);
        });
    });
HTML标记

<ul id="bank_ul" class="list-unstyled">
    <!-- Dynamically populated in myaccOnLoad(); -->
</ul>

Chrome显示问题的潜在问题是由于同步AJAX调用。

当从JSON中获取细节时,我正在使用同步AJAX调用。因为我有多个标签,在所有标签下都有不同的表单。一个我张贴在我的问题是在另一个选项卡,因为同步ajax调用只有第一个选项卡输入值填充/显示在页面上。

在AJAX调用中将sync改为async解决了这个问题。