javascript - HTML 表单中的元素在 Javascript 中未定义

Question

问题是我有一个带有 4 个文本输入的 HTML 表单，我将其提交给一个 JavaScript 函数，前 3 个输入工作正常，但第四个输入未定义。

这里是重要的代码:HTML部分:

<form action="insertServer.php" method="post" id="insertServer">
Navn:       <input type="text" name="navn" id="navn">
Netid:      <input type="text" name="netid" id="netid">
Serverid:   <input type="text" name="serverid" id="serverid">
Location:   <input type="text" name="location" id="location">
<input type="submit" name="submitButton" class="button" id="submitButton" value="Indsend">
</form>
<div class="resultInsert"></div>

Javascript部分:

<script type='text/javascript'> //Add server
$("#insertServer").submit(function(event) {
event.preventDefault();

$("div.resultInsert").html("Location is:"+location.value+" navn is: "+navn.value);

});
</script>

当我在字段中输入数据并按提交时，前 3 个值很好，但第四个值显示为“未定义”

如果您需要查看整个文件，我在这里为其创建了一个要点:https://gist.github.com/anonymous/8052481

谢谢

Answer 1

切勿尝试通过 DOM 使用元素的 id 来访问元素，就好像它是全局变量一样。

某些浏览器使这成为可能(作为 Internet Explorer 4 的非常丑陋的遗产)，但它并不可靠。

在本例中，位置为 the standard location object而不是您的 HTML 元素。

使用 getElementById、jQuery 的选择器引擎或类似的东西通过 DOM 获取元素。

var location = jQuery('#location').val();
var navn = jQuery('#navn').val();

$("div.resultInsert").text("Location is:" + location + " navn is: " + navn);

另请注意，我使用了 text 方法而不是 html 方法。有人可能会在 HTML 中输入一些具有特殊含义的内容。不要让它破坏输出。