2013-11-22 115 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/

請看看,看看,如果你能想出來:)