单击提交按钮时，JavaScript 检查并动态向表中添加文本

Question

基本上我的 HTML 看起来像这样:

<form method="post" name="htmlform" onsubmit = "checkFields()">
  <table style="width: 479px;" border="30" cellspacing="3" cellpadding="10">
  <tbody>
  <tr>
  <td valign="top"><span id="firstNameSpan" >First Name *</span></td>
  <td valign="top"><input type="text" name="first_name" id="first_name"
                    size="30" maxlength="50" /></td>
  </tr>
  <tr>
  <td valign="top"><span id = "lastNameSpan" >Last Name *</span></td>
  <td valign="top"><input type="text" name="last_name" size="30" maxlength="50"/> 
      /td>
  </tr>
  <tr>
  <td style="text-align: center;" colspan="2"><input type="radio" name="sex" 
  value="male" /> Male <input type="radio" name="sex" 
  value="female" /> Female</td>
  </tr>
  <tr>
  <td style="text-align: center;" colspan="2"><input type="submit" value="submit" 
       /></td>
  </tr>
  </tbody>
  </table>
  </form>

提交表单时，onsubmit() 事件检查 first_name 文本字段是否为空，如果为空，则将其左侧的标签或跨度附加到输出“first name*”+“您必须输入名字”姓氏和性别也类似。

问题是表中的文本不会随着 appendchild 更新。当我将语句包含在调试警报中时，消息会被附加然后消失。

下面是 onsubmit = "checkFields()"的 JavaScript 代码。

function checkFields() {
    var firstName = document.getElementById("first_name").value;
    var lastName = document.getElementById("last_name").value;
    if (firstName == "") {
        //<span style='color:red'> Please enter a first name </span>
        var nameHint = " Please enter a first name";
        var node = document.getElementById("firstNameSpan");
        //alert(node.appendChild(document.createTextNode(nameHint)) );
        //not working
        node.appendChild(document.createTextNode(nameHint));

    } if (lastName == "") {
        //additional code
    }
}

提前致谢，非常感谢您的帮助。还有 JavaScript 调试器吗？

问候

大卫·D

Answer 1

我认为您的示例代码由于 html 不正确而无法正常工作。 document.getElementById("last_name") 将返回未定义。

http://jsfiddle.net/5E6my/1/