JavaScript 检查并在提交按钮单击时动态地将文本添加到表格中

Posted 2023-05-07

【中文标题】JavaScript 检查并在提交按钮单击时动态地将文本添加到表格中

【英文标题】：JavaScript checking & adding text to a table dynamically on submit button click

【发布时间】：2012-11-05 09:29:14

【问题描述】：

基本上我的 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 文本字段是否为空白，如果是，则将其左侧的标签或跨度附加到输出“名字*”+“您必须输入名字”姓氏和性别也是如此。

问题是表中的文本没有用 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

【问题讨论】：

在additional code 中，您是否从函数中返回false？如果您想停止表单提交，则需要这样做。并删除 onsubmit = 中 = 周围的空格

您的浏览器有一个内置的 JS 调试器。 Chrome/Safari 的菜单中有开发者工具。 Firefox 有一个控制台，加上 Firebug 扩展，在 IE 中按 F12 来打开开发者工具。

如果您还没有考虑过并且需求允许，您应该考虑使用 jQuery 来完成客户端工作。甚至还有一个验证插件：docs.jquery.com/Plugins/Validation

我已经对其进行了编辑以删除 else 语句，因为我希望所有 3 个左侧文本都在对空或未选择字段作出反应的事件上进行更改。我使用 firefox Michael，所以我会研究 Firebug

【参考方案1】：

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

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

【参考方案2】：

谢谢大家，我得到了 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("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;
  

诀窍是按照 Yury 的建议使用 onsubmit="return checkfields()" 然后在代码块中使用 window.checkFields = function() 等。

我有一个问题... JQuery 使用起来更简单，我在 JQuery 之前学习 JavaScript...我应该跳到 JQUery 吗？ JQuery 也支持 AJAX 框架吗？

非常感谢

大卫