Javascript表单验证onsubmit

我想在使用'onsubmit'事件提交到订单窗体页面之前验证此表单，但它不起作用。不知道我做错了什么。另外，如何将选择的产品以价格和产品ID提交到订单页面？我需要使用表单控件来允许用户输入个人信息和账单信息（姓名，地址等）。如有任何帮助，我们将不胜感激。Javascript表单验证onsubmit

这里是我的代码，我试图用 '的onsubmit' 验证：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

    <title>Javascript - Shopping Cart</title> 

    <script type="text/javascript" charset="utf-8"> 
     function checkCheckBoxes() { 
      if (document.frmTest.product1.checked == false && 
       document.frmTest.product2.checked == false && 
       document.frmTest.product3.checked == false && 
       document.frmTest.product4.checked == false) 
        { 
        alert ('You must select a product to continue.'); 
        return false; 
        } 
      else 
        { 
        return true; 
        } 
     } 
    </script> 

</head> 

<body> 

    <h1>Shopping Cart - Product Page</h1> 

    <form name="product" method="post" action="" onsubmit="return checkCheckBoxes();" > 

     <div id="product1">  

      <p id="title1"><b>Desktop Computer</b></p> 

      <img src="images/desktop.jpg" alt="desktop" width="100"/> 

      <p>The latest in desktop computing.</p> 

      <p><input type="checkbox" name="product1" id="001">Price $599.99</p>  

     </div> 

     <div id="product2"> 

      <p id="title2"><b>Monitor</b></p> 

      <img src="images/monitor.jpg" alt="monitor" width="100"/> 

      <p>21 inch monitor</p> 

      <p><input type=checkbox name="product2" id="002">Price $159.99</p> 
     </div> 

     <div id="product3"> 

      <p id="title3"><b>Keyboard</b></p> 

      <img src="images/keyboard.jpg" alt="keyboard" width="100"/> 

      <p>USB Keyboard</p> 

      <p><input type=checkbox name="product3" id="003">Price $39.99</p>   
     </div> 

     <div id="product4"> 

      <p id="title4"><b>Mouse</b></p> 

      <img src="images/mouse.jpg" alt="mouse" width="100" /> 

      <p>USB Keyboard</p> 

      <p><input type=checkbox name="product4" id="004">Price $25.99</p> 
      </p> 
     </div> 

     <br /> 

     <input type="submit" value="Submit" name="submit" onClick="cart()";/><input , type="reset" value="Reset" name="reset"> 

    </form> 


</body> 
</html>

来源

2011-04-19 James Titus

由于语法错误和询问多种事情，我无法理解这一点。请编辑您的帖子并澄清问题所在。 – ninjagecko 2011-04-19 03:11:54

“Weston Probst - Javascript实验室7”？这是你的HOMEWORK吗？ – 2011-04-19 03:16:20

尝试更改您的if语句以使用getElementById。我跑你的代码，而是使用if语句：

if ((document.getElementById("001").checked == false) && 
    (document.getElementById("002").checked == false) && 
    (document.getElementById("003").checked == false) && 
    (document.getElementById("004").checked == false))

它工作。

来源

2011-04-19 03:26:31 joshhendo

是的，这就是我错过的！谢谢！ – 2011-04-19 03:32:21

变化

<form name="product"

到

<form name="frmTest"

来源

2011-04-19 03:14:43 jessegavin

不知道为什么这个投票。 – jessegavin 2013-02-21 15:06:06

如果你安装了类似Firebug调试器，你可致电

checkCheckBoxes();

在控制台手动（而无需提交的形式），这样就可以看到由函数生成的错误信息，在这种情况下是

TypeError: document.frmTest is undefined

由于表单的名称是“产品”， “document.frmTest ...”应该可能被称为“document.product ...”。

来源

2011-04-19 03:24:00 lyle

谢谢，我需要学习更多地使用调试器。 – 2011-04-19 03:52:27

Javascript表单验证onsubmit

回答

相关问题