Question

我正在使用 ASP.NET 制作我的第一个注册表格，并且还使用了一些 JavaScript 。注册时出现以下错误

未捕获的TypeError：无法读取null的属性“值”

以下是我的JavaScript代码：

function f_submitForm() {
    $("#submit").css("display", "none");
    $("#load").css("display", "block");


    const auxPriorityInput = document.getElementById("ticketPriorityInput");
    const auxticketService = document.getElementById("ticketServiceInput");
    const auxticketSubService = document.getElementById("ticketSubServiceInput");
    const auxCategoryInput = document.getElementById("ticketCategoryInput");
    const auxticketOrigin = document.getElementById("ticketOriginInput");

    const form = new FormData();

    const ins = document.getElementById("file").files.length;
    for (let x = 0; x < ins; x++) {
        form.append("files[]", document.getElementById("file").files[x]);
    }

    form.append("ticketIdAppliInput", document.getElementById("ticketIdAppliInput").value);
    form.append("ticketNameAppliInput", document.getElementById("ticketNameAppliInput").value);
    form.append("ticketEmailAppliInput", document.getElementById("ticketEmailAppliInput").value);    
    form.append("ticketExtAppliInput", document.getElementById("ticketExtAppliInput").value);
    form.append("ticketPhoneAppliInput", document.getElementById("ticketPhoneAppliInput").value);
    form.append("ticketAreaAppliInput", document.getElementById("ticketAreaAppliInput").value);
    form.append("ticketLocationAppliInput", document.getElementById("ticketLocationAppliInput").value);
    form.append("ticketSubjectInput", document.getElementById("ticketSubjectInput").value);
    form.append("ticketDescrInput", document.getElementById("ticketDescrInput").value);
    form.append("ticketPriorityInput", auxPriorityInput.options[auxPriorityInput.selectedIndex].value);
    form.append("ticketServiceInput", auxticketService.options[auxticketService.selectedIndex].value);
    form.append("ticketSubServiceInput", auxticketSubService.options[auxticketSubService.selectedIndex].value);
    form.append("ticketCategoryInput", auxCategoryInput.options[auxCategoryInput.selectedIndex].value);
    form.append("ticketOriginInput", auxticketOrigin.options[auxticketOrigin.selectedIndex].value);

在浏览器的控制台中找到错误

Console image error

恰好在ticketExtAppliInput的属性中，该错误可能是由于以下事实导致的：默认情况下，当发送此void来保存0时，我需要对此字段进行验证，但是我不确定该怎么做它，如果那是解决方案，您可以告诉我如何解决；如果不是，那将是正确的解决方案

更新：

我有两种形式，但是根据会话变量的不同，某些字段会被加载，ticketExtAppliInput必须同时进入另一个域，不同之处在于我还需要进入ticketExtAppliInput，但是它没有输入，我需要将其默认存储为“ 0”值

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card-body">
                        <div class="mb-4">
                                <div class="form-group">
                                    <label for="ticketExtAppliInput">Extensión:</label>
                                    <input step="1" id="ticketExtAppliInput" type="number" maxlength="6" oninput="if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="extension" class="form-control form-control-user">
                                </div>
                        </div>
                </div>

Answer 1

首先，请发布您的HTML。没有它，很难说出是怎么回事。

但是错误很直接。看起来您的HTML中没有id="ticketExtAppliInput"元素。检查拼写错误或其他原因。这是getElementById返回null的最可能原因。

Answer 2

该错误表明javascript找不到ID为“ ticketExtAppliInput”的元素。第一步是检查您的HTML并确保该元素上的id正确拼写。

更普遍的问题是，您正在DOM中搜索元素，然后尝试访问其“值”属性。最佳做法是确保您在真正获得该元素之前就已经找到它。

Answer 3

四处走走之后，我找到了验证问题的解决方案，并设法做到了，如下所述，尝试进行验证以防万一，将其赋值为0

function f_submitForm() {
$("#submit").css("display", "none");
$("#load").css("display", "block");

const auxPriorityInput = document.getElementById("ticketPriorityInput");
const auxticketService = document.getElementById("ticketServiceInput");
const auxticketSubService = document.getElementById("ticketSubServiceInput");
const auxCategoryInput = document.getElementById("ticketCategoryInput");
const auxticketOrigin = document.getElementById("ticketOriginInput");


const form = new FormData();

const ins = document.getElementById("file").files.length;
for (let x = 0; x < ins; x++) {
    form.append("files[]", document.getElementById("file").files[x]);
}

form.append("ticketIdAppliInput", document.getElementById("ticketIdAppliInput").value);
form.append("ticketNameAppliInput", document.getElementById("ticketNameAppliInput").value);
form.append("ticketEmailAppliInput", document.getElementById("ticketEmailAppliInput").value);    
if ($('ticketExtAppliInput').val() == "") {

    //we give it the value of zero by not having any value
    document.getElementById("ticketExtAppliInput").value = "0";
} 
form.append("ticketPhoneAppliInput", document.getElementById("ticketPhoneAppliInput").value);
form.append("ticketAreaAppliInput", document.getElementById("ticketAreaAppliInput").value);
form.append("ticketLocationAppliInput", document.getElementById("ticketLocationAppliInput").value);
form.append("ticketSubjectInput", document.getElementById("ticketSubjectInput").value);
form.append("ticketDescrInput", document.getElementById("ticketDescrInput").value);
form.append("ticketPriorityInput", auxPriorityInput.options[auxPriorityInput.selectedIndex].value);
form.append("ticketServiceInput", auxticketService.options[auxticketService.selectedIndex].value);
form.append("ticketSubServiceInput", auxticketSubService.options[auxticketSubService.selectedIndex].value);
form.append("ticketCategoryInput", auxCategoryInput.options[auxCategoryInput.selectedIndex].value);
form.append("ticketOriginInput", auxticketOrigin.options[auxticketOrigin.selectedIndex].value);

如何解决“未捕获的TypeError：无法读取null的属性'value'”

3 个答案: