JavaScript检查&；单击“提交”按钮时向表中动态添加文本_Javascript_Appendchild_Createtextnode

JavaScript检查&；单击“提交”按钮时向表中动态添加文本

javascript

JavaScript检查&；单击“提交”按钮时向表中动态添加文本,javascript,appendchild,createtextnode,Javascript,Appendchild,Createtextnode,基本上，我的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"

基本上，我的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>


名字*
姓*
/td>
男女

提交表单时，onsubmit（）事件检查first_name textfield是否为空，如果为空，则其左侧的标签或范围将附加到输出“first name*”+“you must enter a first name”，类似地，姓氏和性别也是如此

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

下面是onsubmit=“checkFields（）”的JavaScript代码

函数checkFields（）{
var firstName=document.getElementById（“first_name”）.value；
var lastName=document.getElementById（“姓氏”）.value；
如果（firstName==“”）{
//请输入一个名字
var nameHint=“请输入名字”；
var node=document.getElementById（“firstNameSpan”）；
//警报（node.appendChild（document.createTextNode（nameHint））；
//不起作用
appendChild（document.createTextNode（nameHint））；
}如果（lastName==“”）{
//附加代码
}
}

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

问候

David D

我相信由于html不正确，您的示例代码无法正常工作

document.getElementById（“姓氏”）

将返回未定义

谢谢大家，我已经掌握了JFiddle的诀窍。虽然错误消息对调试没有帮助，但是分割屏幕非常有用。下面是完整的代码（1）HTML（2）JavaScript

<form method="post" name="htmlform" onsubmit="return 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" id="last_name" size="30" 
  maxlength="50" /></td>
  </tr>
  <tr>
  <td style="text-align: center;" colspan="2" id = "sexMessage">
      Please select Male or Female*</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按钮的未填充字段做出反应的JavaScript代码如下：（有没有使代码更简单的方法？？）

window.checkFields=function（）
{
var firstName=document.getElementById（“first_name”）；
var lastName=document.getElementById（“姓氏”）；
如果（firstName.value==“”）
{
//请输入一个名字
var nameHint=“*请输入名字”；
var fnNode=document.getElementById（“firstNameSpan”）；
while（fnNode.firstChild）
{
fnNode.removeChild（fnNode.firstChild）
}
appendChild（document.createTextNode（nameHint））；
fnNode.style.color=“红色”；
}否则{
var nameHint=“First Name*”；
var fnNode=document.getElementById（“firstNameSpan”）；
while（fnNode.firstChild）
{
fnNode.removeChild（fnNode.firstChild）
}
appendChild（document.createTextNode（nameHint））；
fnNode.style.color=“黑色”；
}
如果（lastName.value==“”）
{
//附加代码
var nameHint=“*请输入姓氏”；
var lnNode=document.getElementById（“lastNameSpan”）；
while（lnNode.firstChild）
{
lnNode.removeChild（lnNode.firstChild）
}
appendChild（document.createTextNode（nameHint））；
lnNode.style.color=“红色”；
}否则{
var nameHint=“Last Name*”；
var lnNode=document.getElementById（“lastNameSpan”）；
while（lnNode.firstChild）
{
lnNode.removeChild（lnNode.firstChild）
}
appendChild（document.createTextNode（nameHint））；
lnNode.style.color=“黑色”；
}
var radios=document.getElementsByName（“sex”）；
var radioValue=“”
对于（var i=0；iIn附加代码
是否从函数中返回false
？如果要停止表单提交，则需要执行此操作。并删除onsubmit=
中=周围的空白。您的浏览器有内置的JS调试器。Chrome/Safari在菜单中有开发工具。Firefox有控制台，加上Firebug扩展，IE中的F12打开开发者工具。如果你还没有考虑到它，并且需求允许，你应该研究jQuery来做客户端工作。甚至还有一个验证插件：我编辑了它以删除else语句，因为我希望在响应空或未选择的事件时更改所有3个左侧文本我使用firefox，所以我会调查Firebug
<form method="post" name="htmlform" onsubmit="return 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" id="last_name" size="30" 
  maxlength="50" /></td>
  </tr>
  <tr>
  <td style="text-align: center;" colspan="2" id = "sexMessage">
      Please select Male or Female*</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>  

window.checkFields = function()
  {
  var firstName = document.getElementById("first_name");
  var lastName = document.getElementById("last_name");
  if(firstName.value == "")
  {
  //<span style='color:red'> Please enter a first name </span>
    var nameHint = " *Please enter a first name ";
    var fnNode = document.getElementById("firstNameSpan");
    while(fnNode.firstChild)
    {
        fnNode.removeChild(fnNode.firstChild)
    }
    fnNode.appendChild(document.createTextNode(nameHint));
    fnNode.style.color="red";

  } else{
      var nameHint = " First Name *";
      var fnNode = document.getElementById("firstNameSpan");
      while(fnNode.firstChild)
      {
        fnNode.removeChild(fnNode.firstChild)
      }
      fnNode.appendChild(document.createTextNode(nameHint));
      fnNode.style.color="black";
  }
  if (lastName.value == "")
  {
  //additional code
    var nameHint = " *Please enter a last name";
    var lnNode = document.getElementById("lastNameSpan");
    while(lnNode.firstChild)
    {
        lnNode.removeChild(lnNode.firstChild)
    }
    lnNode.appendChild(document.createTextNode(nameHint));
    lnNode.style.color="red";
  } else{
      var nameHint = " Last Name *";
      var lnNode = document.getElementById("lastNameSpan");
      while(lnNode.firstChild)
      {
        lnNode.removeChild(lnNode.firstChild)
      }
      lnNode.appendChild(document.createTextNode(nameHint));
      lnNode.style.color="black";
  }
      var radios = document.getElementsByName("sex");
      var radioValue = ""
      for(var i=0; i<radios.length; i++)
      {
          if(radios[i].checked)
          {
              radioValue = radios[i].value;
          }

      }
      if(radioValue === "")
      {
          var sexNode = document.getElementById("sexMessage");
          var nameHint = "*You did not choose a sex";
          while(sexNode.firstChild)
          {
              sexNode.removeChild(sexNode.firstChild);
          }
          sexNode.appendChild(document.createTextNode(nameHint));
          sexNode.style.color="red";
      } else {
          var sexNode = document.getElementById("sexMessage");
          var nameHint = "Please select Male or Female*";
          while(sexNode.firstChild)
          {
              sexNode.removeChild(sexNode.firstChild);
          }
          sexNode.appendChild(document.createTextNode(nameHint));
          sexNode.style.color="black";
      }               
      return false;
  }