Question

在编码方面我很讨厌，因此我对各种语言有基本到中等的理解。我有一个包含许多字段的HTML表单，其中一个我在按下按钮时想要抓取但我得到未捕获TypeError：无法读取属性'value'为null

这是我的总代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="testForm.css">
    <title>Create Incident Form</title>
</head>
<body>
    <header>Whittle ERP Ecosystem</header>
    <p style="font-family:GE Inspira Sans;font-size:18px">This form is for 
raising Incidents against the pillar applications in the Whittle ERP 
Ecosystem</p>
    <p style="font-family:GE Inspira Sans;font-size:18px;color:red;font-
weight:bold">ALL FIELDS ARE MANDATORY</p>
    <form id="frm1" action="" method="post" name="incForm">
        <fieldset>
        <legend>User Detail</legend>
        <label for="user-SSO">*SSO</label>
        <input type="text" name="usrSSO" id="usrSSO" value="108013590" required>
        <input type="Button" onclick="validateSSO()" value="Post"> 
        <label for="user-tel">&nbsp*Contact Number:</label>
        <input type="text" name="user-tel" id="user-tel" required>
    </fieldset>
    <fieldset>
        <legend>System</legend>
        <label for="*Choose System">Choose System:</label>
        <select name="system" id="system" required>
            <option value="R12">R12</option>
            <option value="Proficy">Proficy</option>
            <option value="TipQA">TipQA</option>
        </select>
    </fieldset>
    <fieldset>
        <legend>*Brief Description</legend>
        <textarea rows="1" cols="60" name="bDesc" required></textarea>
    </fieldset>
    <fieldset>
        <legend>*Detailed Description</legend>
        <textarea rows="8" cols="60" name="dDesc" required></textarea>
    </fieldset>
    <fieldset>
        <legend>Action</legend>
        <input type="submit" name="Submit" value="Submit">
        <input type="reset" value="Reset">
    </fieldset>
</form>



<script>

    function validateSSO(){

       document.write("Starting function.....!<br />")
       var fname = document.getElementById("usrSSO");
       document.write(fname.value)
       var strOutput
       var xmlhttp = new XMLHttpRequest();

       xmlhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) { 
           strOutput = xmlhttp.responseText
           document.write("Function value: " + strOutput + "<br />")
       }
   };
           xmlhttp.open("GET", "url", true)
           xmlhttp.send();

       if (strOutput == "A" ) {
           window.alert("Condition met - SSO is valid")
      }else{
           document.write("Nope - invalid");
     }

   }



   </script>

我已经看过一些处理此事的文章，但似乎没有人帮助我！我只是想抓住usrSSO文本字段的内容以用于验证函数。我错过了什么/搞砸了什么？

提前致谢

Answer 1

好的，所发生的事情是，如果您将document.write更改为document.write，您的console.log功能会用一行文字替换整个文档走开。

Answer 2

正如之前所说，使用console.log将解决您的第一个问题。我看到了第二个问题，那就是你如何处理strOutput var。编写它的方式将导致您处理undefined变量，因为请求是异步的。您只应在onreadystatechange的回调函数中使用它，如下所示，以确保在请求完成时使用它。

＆＃13;

function validateSSO() {

  console.log("Starting function.....!")
  var fname = document.getElementById("usrSSO");
  console.log(fname.value)
  var xmlhttp = new XMLHttpRequest();

  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4) {
      if (this.status == 200){
        var strOutput = xmlhttp.responseText
        console.log("Function value: " + strOutput);
        if (strOutput == "A") {
          alert("Condition met - SSO is valid")
        } 
        else {
          alert("Nope - invalid");
        }
      }
      else {
        alert('There was a problem with the request. status code: ' + this.status);
      }
    }
  };
  xmlhttp.open("GET", "url", true)
  xmlhttp.send();
}

＆＃13;

<header>Whittle ERP Ecosystem</header>
<p style="font-family:GE Inspira Sans;font-size:18px">This form is for raising Incidents against the pillar applications in the Whittle ERP Ecosystem
</p>
<p style="font-family:GE Inspira Sans;font-size:18px;color:red;font-
weight:bold">ALL FIELDS ARE MANDATORY</p>
<form id="frm1" action="" method="post" name="incForm">
  <fieldset>
    <legend>User Detail</legend>
    <label for="user-SSO">*SSO</label>
    <input type="text" name="usrSSO" id="usrSSO" value="108013590" required>
    <input type="Button" onclick="validateSSO()" value="Post">
    <label for="user-tel">&nbsp*Contact Number:</label>
    <input type="text" name="user-tel" id="user-tel" required>
  </fieldset>
  <fieldset>
    <legend>System</legend>
    <label for="*Choose System">Choose System:</label>
    <select name="system" id="system" required>
            <option value="R12">R12</option>
            <option value="Proficy">Proficy</option>
            <option value="TipQA">TipQA</option>
        </select>
  </fieldset>
  <fieldset>
    <legend>*Brief Description</legend>
    <textarea rows="1" cols="60" name="bDesc" required></textarea>
  </fieldset>
  <fieldset>
    <legend>*Detailed Description</legend>
    <textarea rows="8" cols="60" name="dDesc" required></textarea>
  </fieldset>
  <fieldset>
    <legend>Action</legend>
    <input type="submit" name="Submit" value="Submit">
    <input type="reset" value="Reset">
  </fieldset>
</form>

＆＃13;

使用Javascript从表单字段中检索值时出错

2 个答案: