Javascript 表单输入值更新仅在调试条件下成功

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 6 年前。

我有一个奇怪的错误，我无法弄清楚。我有一个从 CHART 数组生成的 html 表。我尝试实现一个允许我更改一行内容的元素。如果我使用调试器并添加一些检查点，它工作得很好，但如果我不这样做，它就会表现得很奇怪。

函数openModForm

我在 javascript 中创建了一个 div，并将其添加到表格中一行的单元格中。

我将输入表单 html 加载到 div 中。

JS将从CHART全局变量中获取当前行行中显示的信息。

我用当前值填充输入的 value 属性(这样，如果用户不想修改特定值，它将保持不变)。

    function openModForm(x) 
    {

        var updatebox = document.createElement("div");
        //we keep only one updatebox open at any time, right now i think to attach it to row
        updatebox.id = 'updatebox';
        //so that the click on updatebox won't trigger the parent (modcell) function which would create more updateboxes
        updatebox.addEventListener("click", stopEvent, false);
        x.appendChild(updatebox);
        //load form html to div
        $("#updatebox").load("modform.html");
        //populate modform with default values
        var rowind = x.parentElement.rowIndex;
        var task = CHART[rowind-1][1];
        var person = CHART[rowind-1][2];
        var start = CHART[rowind-1][3];
        var end  = CHART[rowind-1][4];//if i add debugger checkpoint here everything works as intended!
        document.forms["UpdateForm"]["TaskInput"].value=task;
        document.forms["UpdateForm"]["RespInput"].value=person;
        document.forms["UpdateForm"]["StartInput"].value=start;
        document.forms["UpdateForm"]["EndInput"].value=end;

    }

function stopEvent(ev) 
{
    ev.stopPropagation();
}

接下来是函数 modTask()

通过单击表单修改按钮来激活它。

它从表单字段加载值并在我的图表中替换它们。

它还会发送请求，以便服务器上的值也会发生更改。

    function modTask()
    {
        var rowind = document.getElementById("updatebox").parentElement.parentElement.rowIndex;
        var taskid = CHART[rowind-1][0];
        var task = document.forms["UpdateForm"]["TaskInput"].value;
        var person = document.forms["UpdateForm"]["RespInput"].value;
        var start = document.forms["UpdateForm"]["StartInput"].value;
        var end  = document.forms["UpdateForm"]["EndInput"].value;
        var chartID=CHART[0][5];
        var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        xhr.onreadystatechange=function()
        {
            if (this.readyState==4 && this.status==200) 
            {

                document.getElementById("MessageArea").innerHTML=this.responseText;
                //set new CHART values
                CHART[rowind-1][1]=task;
                CHART[rowind-1][2]=person;
                CHART[rowind-1][3]=start;
                CHART[rowind-1][4]=end;
                //remove updatebox from modcell after work is done
                var p=document.getElementById("updatebox").parentElement;
                p.removeChild(p.childNodes[1]);
            }
        }

        xhr.open( "POST", "mod_task.php", true );
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send( "taskid="+encodeURIComponent(taskid)
        +"&task="+encodeURIComponent(task)
        +"&person="+encodeURIComponent(person)
        +"&start="+encodeURIComponent(start)
        +"&end="+encodeURIComponent(end)
        +"&chid="+encodeURIComponent(chartID)
        );  
    }

错误

如果我在 openModForm 行上有一个调试器检查点，我已相应地进行了评论 ---- 一切都按预期工作。输入字段显示当前属于该条目的值。我可以更改字段或保留它们。

如果我删除调试检查点，表单输入字段将显示为空，并且实际上如果我不更改值属性，则值属性将保持为空，将提交空字段。

我无法理解这样的事情怎么可能。欢迎任何关于这个错误是什么以及它是如何形成的想法。我尝试做一些变通办法——比如直接从 javascript 生成表单字段，而不是从 html 加载它们，然后更新它们的值属性。但我真的很想了解一下到底发生了什么，以及当我将来想更改导入表单的值时是否有解决方案。

Answer 1

通常这样的错误告诉我问题出在时间上。我用代码来解释一下:

    $("#updatebox").load("modform.html");
    // Do tons of stuff

在此代码中，Do 吨 block 不会等待 #updatebox 加载 modform.html，因此您的代码正在尝试操作尚未加载的表单。这在调试器中起作用的原因是，当您进行调试时，加载会在您继续执行 block 之前在后台安静地完成。如果没有调试器，代码会立即执行，并且在您尝试操作表单之前加载尚未完成。

这是一个简单的修复:

    $("#updatebox").load("modform.html", function(){
      // Do tons of stuff
    });

这将等待加载完成，然后再尝试执行大量操作。

这是 .load() 的文档.