Question

我在制作此表单时遇到提交按钮的问题，由于某种原因，当我按提交时，方法（在javascript中）不会使用页面底部的表单信息更新。我不知道是否与页面中的拼写错误或逻辑错误有关。

<!DOCTYPE html>
<html> <head> <title></title>


<script>

function update(){
     var form = document.getElementById("myForm");
     var status = document.getElementById("status");
    status.innerHTML = "First Name" + form.elements["name"].value
}

</script>
</head>

<body>

<form id = "myForm">
First Name: <input name = "first" /><br />
Last Name: <input name = "second"/><br />
Date <input type="date" name = "date"/><br />
 Eye Colour <select name ="colour">
     <option value="blue">Blue</option>
     <option value="green">Green</option>
     <option value="brown">Brown</option>
     <option value="grey">Grey</option>
     <optioin value = "other"> Other</optioin>
</select> <br />


<button type="reset" value="Reset">Reset</button><br />
<button type="submit" onCLick = "update();" value="Submit">Submit</button>

</form>

<div id="status"></div>


</body>


</html>

Answer 1

您的提交按钮中有拼写错误。它应该是onclick，而不是onCLick。

<button type="submit" onclick="update()" value="Submit">Submit</button>

我一直在寻找，我注意到更多的错误。您需要花更多时间检查自己的代码，因为其中一些应该是显而易见的。例如：

<optioin value = "other"> Other</optioin>

它应该是option标记，而不是optioin。

Answer 2

首先，对于语义，它应该是status.innerHTML = "First Name" + form.elements["name"].value而不是status.innerHTML = "First Name " + form.elements["first"].value;（onClick中的大写字母L），但问题是你没有名称为＆＃34; name＆＃34的输入;，所以

{{1}}

抛出一个空例外。

应该是：

{{1}}

希望它有所帮助。

Javascript使用函数提交表单并打印下面的数据

2 个答案: