时间戳

首页 > 解决方案 > 通过javascript获取表单字段数据会抛出错误（值为null）

javascript - 通过javascript获取表单字段数据会抛出错误（值为null）

问题描述

function myFunc() {
  console.log("entered");
  document.write('Submitted Data');
  var firstname = document.getElementById("fname").value;
  var lastname = document.getElementById("lname").value;
  document.writeln("Your full name is:" + firstname + lastname);
}
<form>
  <label> Firstname </label>
  <input type="text" name="firstname" id="fname" size="15" /> <br> <br>
  <label> Lastname</label>
  <input type="text" name="lastname" id="lname" size="15" /> <br> <br>
  <label>   
    Gender :  
    </label><br>
  <input type="radio" name="male" /> Male <br>
  <input type="radio" name="female" /> Female
  <br>
  <br>
  <input type="button" value="Submit" onclick="myFunc()" />
</form>

单击提交后，它没有获得名字并在控制台中显示错误为 null 值。有人可以帮忙吗？整个代码保存在一个 HTML 页面中

标签： javascripthtmlforms

解决方案

那是因为这条线document.write('Submitted Data');。document.write删除现有的 html，因此在您使用的下一行中document.getELementById找不到 dom 元素

function myFunc() {
  var firstname = document.getElementById("fname").value;
  var lastname = document.getElementById("lname").value;
  document.writeln("Your full name is:" + firstname + lastname);
}
<body bgcolor="Lightskyblue">
  <br>
  <br>
  <form>

    <label> Firstname </label>
    <input type="text" name="firstname" id="fname" size="15" /> <br> <br>
    <label> Lastname</label>
    <input type="text" name="lastname" id="lname" size="15" /> <br> <br>


    <label>   
    Gender :  
    </label><br>
    <input type="radio" name="male" /> Male <br>
    <input type="radio" name="female" /> Female
    <br>
    <br>


    <input type="button" value="Submit" onclick="myFunc()" />
  </form>
</body>

推荐阅读