2013-11-22 204 views
0

基本上,我试图创建一个表获取用户输入并检查答案是否正确。检查输入按钮

我希望它根据用户的答案更改第4列以更正或不正确。

这里是我的尝试:

<form name="input" action="javascript:void(0);" method="get"> 
     <table id="compsci-table" style = "margin: auto;"> 

      <tr> 
       <th>Microsoft Office</th> 
       <th>Example</th> 
       <th>Extension</th> 
       <th>Feedback</th> 
      </tr> 
      <tr> 
       <td>Word Processing</td> 
       <td>Word</td> 
       <td> 
        <form id="form1" method="" action="" onsubmit="return validateAns(wpExtension)"> 

          <input type="text" name="wpExtension"> 
          <input type="submit" name="b1" value="Check" class="submitbutton aligncenter"/> 
        </form> 

         <script> 


          function validateAns(Ans) { 

           if(Ans == "docx") 
            alert("Correct!"); 
            $("#formA").submit(function() { 

            $("#reveal-space1").text("Correct").show(); 
             return true; 

            }); 
           else 
            alert("Incorrect."); 
            $("#formA").submit(function() { 

            $("#reveal-space1").text("Incorrect").show(); 
             return true; 

            }); 

         </script> 
       </td> 
       <td> 
        <form id="formA" action="javascript:void(0);"> 
         <div id="reveal-space1"> 


         </div> 
        </form> 


       </td> 



      </tr> 

      <tr> 
       <td>Spreadsheet</td> 
       <td> 


        <form id="form2" method="" action="" onsubmit="return validateAns(ssExample)"> 

          <input type="text" name="ssExample"> 
          <input type="submit" name="b1" value="Check" class="submitbutton aligncenter"/> 
        </form> 

         <script> 


          function validateAns(Ans) { 

           if(Ans == "Excel") 
            alert("Correct!"); 
            $("#formA").submit(function() { 

            $("#reveal-space2").text("Correct").show(); 
             return true; 

            }); 
           else 
            alert("Incorrect."); 
            $("#formA").submit(function() { 

            $("#reveal-space2").text("Incorrect").show(); 
             return true; 

            }); 
         </script> 




       </td> 
       <td>xlsx</td> 
       <td> 
        <form id="formB" action="javascript:void(0);"> 
         <div id="reveal-space2"> 


         </div> 
        </form> 


       </td> 
      </tr> 

在正确的方向任何指导将不胜感激。

回答

0

有代码中的几个问题:

  • <form>绝不内的另一个<form>,这不是有效的HTML,而你并不需要很多形式...
  • id的独特之处HTML,不要使用相同的id两次
  • 不具有相同的名称
  • namewpExtension名称的两个不同的功能指的是元素,而不是它的VALU即使用wpExtension.value代替
  • 请把{}在if条件,如果有一个以上的线

这里是一个工作演示清理后您的代码:http://jsfiddle.net/VbCnu/4/

请看看,看看,如果你能想出来:)