Question

我有这个代码：

<input id="qfront" name="qfront" placeholder="Ketik Nama Kampus ..."
value="" type="text" onKeyPress="strQuery(this.value)"/> *<!--first inputbox-->*
<script>
function strQuery(str) {
     if (str.length == 0) {
         document.getElementById("valdata").value = "";
         return;
     } else {
         var xmlhttp = new XMLHttpRequest();
         xmlhttp.onreadystatechange = function() {
             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("valdata").value = xmlhttp.responseText;
             }
         }
         xmlhttp.open("POST", "inc.php?q="+str, true);
         xmlhttp.send(null);
     }
}
</script>
<input id="valdata" name="valdata" value="" type="text" onChange="showalert()"/>*<!--2nd inputbox-->*
<script>
function showalert(){
    var X =document.querySelector("#valdata").value;
    alert(X);
}
</script>

当我运行function strQuery(str)时，它会100％运行并在第二个输入框（#valdata）中显示结果。当第二个输入框包含数据时（来自第一个输入框）。第二个框没有显示警告

我错过了什么吗？我怎样才能做到这一点？（请不要使用jquery）。非常感谢

Answer 1

我终于找到了解决问题的方法。我将第二个JS（showalert）的位置固定在第一个，如下所示：

    <input id="qfront" name="qfront" placeholder="Ketik Nama Kampus ..."
 value="" type="text" onKeyPress="strQuery(this.value)"/>
            <script>
            function strQuery(str) {
                 if (str.length == 0) {
                     document.getElementById("valdata").value = "";
                     return;
                 } else {
                     var xmlhttp = new XMLHttpRequest();
                     xmlhttp.onreadystatechange = function() {
                         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            document.getElementById("valdata").value = xmlhttp.responseText;
                            showalert()
                         }
                     }
                     xmlhttp.open("POST", "inc.php?q="+str, true);
                     xmlhttp.send(null);
                 }
            }
            function showalert(){
                var X =document.querySelector("#valdata").value;
                alert(X);
            }
            </script>
            <input id="valdata" name="valdata" value="" type="text"/>

非常感谢您的讨论。

Answer 2

在showalert();

之后，似乎缺少双引号

但另外，我认为onchange可能只会响应用户输入而触发。如果是这种情况，只需将您的代码更改为：

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById("valdata").value = xmlhttp.responseText;
    document.getElementById("valdata").onchange();
}

第二个输入框从第一个框填充数据时显示警报

2 个答案: