2017-05-02 16 views
0

私はカウントダウンタイマー付きのフォームを使用しています。タイマーがゼロになると、フォームは自動的に提出されます。しかし、提出はうまくいっていません。タイマーが「0」になると、タイマーは停止します。私はここに私のコードを与えている。タイマーがゼロになると、フォームは送信されません。

私がやった間違いを見つけてください。コードの下

<html> 
    <head> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script type="text/javascript" src="jquery.min.js"></script> 
     <script> 
      $(document).ready(function(){ 

       $("input[type='checkbox']").change(function() { 
        if ($(this).is(":checked")) 
        { 
         $(this).closest("thead").addClass("redBackground"); 
        } 
        else 
        { 
         $(this).closest('thead').removeClass("redBackground"); 
        } 
       }); 
      }); 
     </script> 
     <script language="javascript"> 
      function over() { 
       document.getElementById("submit").disabled = true;  
      } 

      function time() { 
       var minute = Math.floor(timeleft/60); 
       var seconds = timeleft % 60; 
       if (timeleft <= 0) 
       { 
        clearTimeout(timer); 
        document.getElementById("submit").submit();   
       } 
       else 
       { 
        if (minute < 10) 
        { 
         minute = "0" + minute; 
        } 

        if(seconds < 10) 
        { 
         seconds = "0" + seconds; 
        } 
        document.getElementById("timer").innerHTML = minute + ":" + seconds; 
       } 

       timeleft--; 
       var timer = setTimeout(function(){time()}, 1000); 
      } 
     </script> 
    <style> 
    </head> 
    <body onload="time()"> 
     <script> 
      var timeleft = 2 * 60; 
     </script> 
     <?php 
      include('connect.php'); 
      session_start(); 
      $sql = "select * from test"; 
      $query = mysql_query($sql); 
      $i = 0; 
      echo "<div id='timer'></div>"; 
      echo"<form method='post' action='test2.php' name='exam' id='exam'>"; 
      while($row = mysql_fetch_array($query)) 
      { 
       echo "<center><table border='0'>"; 
       echo "<thead>"; 
       $i++; 
       echo "<td colspan='4'>"; 
       echo "<input type='checkbox' id='$i' name='$i'>"; 
       echo $i . "."; 
       echo "&nbsp"; 
       echo $row['question']; 
       echo "</td>"; 
       echo "</thead>"; 
       echo "<tr>"; 
       echo "<td class='ans'>"; 
       echo "<input type='radio' name='ans$i' value='A'>"; 
       echo "(A)&nbsp&nbsp"; 
       echo $row['opt1']; 
       echo "</td>"; 
       echo "<td class='ans'>"; 
       echo "<input type='radio' name='ans$i' value='B'>"; 
       echo "(B)&nbsp&nbsp"; 
       echo $row['opt2']; 
       echo "</td>"; 
       echo "<td class='ans'>"; 
       echo "<input type='radio' name='ans$i' value='C'>"; 
       echo "(C)&nbsp&nbsp"; 
       echo $row['opt3']; 
       echo "</td>"; 
       echo "<td class='ans'>"; 
       echo "<input type='radio' name='ans$i' value='D'>"; 
       echo "(D)&nbsp&nbsp"; 
       echo $row['opt4']; 
       echo "</td>"; 
       echo "</tr>"; 
       echo "</table></center>"; 
       echo "<br>"; 
      } 

      echo "<center><input type='submit' name='submit' value='submit' id='submit' onclick='over();'></center>"; 
      echo "</form>"; 
      $_SESSION["qs"] = $i; 
     ?> 
    </body> 
</html> 
+1

試しに変更してください。document.getElementById( "submit"); submit(); 'to' document.getElementById( "exam")。submit(); ' –

+0

私はまだ両方のケースを試してみました – PAVAN

+0

コンソールに何かエラーがありますか? (ブラウザのコンソールを確認してください) –

答えて

0

ではなく、送信ボタンの上にそれを呼び出そうとの<form>submit()メソッドを使用します。

// 'exam' is the ID of your form 
document.getElementById('exam').submit(); 

次のように動作するはずです。この問題は、送信ボタンにsubmitのIDを指定したもので、submit()の方法がformより優先されるようです。だから私はsubmitButtonに改名して動作します。

var timer, 
 
    timeleft = 5; // 5 seconds 
 

 
function time() 
 
{ 
 
    var minute = Math.floor(timeleft/60); 
 
    var seconds = timeleft % 60; 
 
    
 
    if (timeleft >= 0) 
 
    { 
 
     if (minute < 10) 
 
     { 
 
      minute = "0" + minute; 
 
     } 
 
     
 
     if (seconds < 10) 
 
     { 
 
      seconds = "0" + seconds; 
 
     } 
 
    
 
     document.getElementById("timer").innerHTML = minute + ":" + seconds; 
 
    } 
 
    
 
    if (timeleft <= 0) 
 
    {  
 
     clearTimeout(timer); 
 
     document.getElementById("exam").submit(); 
 
     
 
     return; 
 
    } 
 

 
    timeleft--; 
 
    
 
    timer = setTimeout(time, 1000); 
 

 
} 
 

 
time();
<form id="exam" action="http://www.google.com/search" type="get"> 
 
    <input type="text" name="q" value="Test"> 
 
    <input type="submit" value="Submit" id="submitButton"> 
 
</form> 
 
<div id="timer"></div>

+0

申し訳ありませんが、私はId試験を試みましたが、後で提出するように変更しました。どちらの場合も動作していません – PAVAN

+0

document.getElementById( "exam")の後にreturnを書くことは必須ですか?Submit(); – PAVAN

+0

いいえ、私はちょうど 'timer = setTimeout(time、1000)'が再び呼び出されるのを避けたかったのです。 – Mary

0

試してみてください。

document.getElementById('submit').click(); 
document.getElementById('submit').trigger('click'); 
+0

ボタンをクリックしていません。時間がゼロになると、自動的にフォームを提出する必要があります – PAVAN

0

各第二にデクリメントカウントダウンタイマーを示すサンプルコードを書きました。最後にタイマーが「0」になると、残りの計算を行うために使用できる関数sendFormDataToServer()が呼び出されます。

一度確認してください。多分あなたの問題を解決するでしょう。

<html> 
<head> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 

<script> 
$(document).ready(function(){ 
    var countdown_limit = 5; 

    // print the countdown message 
    function showCountDownMsg(countdown_limit){ 
     $('#countdown').html(countdown_limit+' Sec Left'); 
    } 

    showCountDownMsg(countdown_limit); 

    // Refresh countdown timer in every 1sec(1000ms) 
    var refreshInterval =setInterval(function(){ refreshCountDown(); }, 1000); 

    // function for refresh countdown timer 
    function refreshCountDown(){ 
     console.log('all is well'); 
     countdown_limit--; 
     showCountDownMsg(countdown_limit); 

     if(countdown_limit === 0){ 
      console.log("Countdown stopped"); 
      clearInterval(refreshInterval); 

      // Call function to send form data to server 
      sendFormDataToServer(); 
     } 
    } 

    function sendFormDataToServer(){ 
     console.log('EXtracting form data & Sending those to server '); 
    } 
}); 
</script> 

</head> 
<body> 
    <div id='countdown'></div> 
</body> 
</html> 
+0

関数sendFormDataToServerがフォームを送信します。私はあなたを取得しなかった – PAVAN

+0

私はあなたに機能のコンテンツの部分を残しました。あなたは何をしたいのかのためのコードを追加することができます。フォームの値を抽出するためのコードを配置し、その関数内でajax呼び出しを行います。 – mi6crazyheart

関連する問題