2016-05-02 7 views
1

フォームのページをスクロールしてリセットする前に、このjqueryスクリプトの結果をわずか数秒間表示するのをフォームページで止める方法を教えてもらえますか?フォームの自動リセットを停止するにはどうすればよいですか?

フォームがアンカー#resultsにスクロールして結果が表示されます。しかし、これは動作しますが、結果は1秒間だけ表示され、ページはフォームに戻ってリセットされてリセットされます。

return false;または/およびe.preventDefault();を使用する必要がありますが、どこに行かなければならないのか分かりません。どうもありがとう。

$(document).ready(function() { 
    $("#message").hide(); 
    $("#myform").validate({ 
     submitHandler: function() { 
      $('#gauge').empty(); 
      var formdata = $("#myform").serialize(); 
      //Post form data 
      $.post('php_includes/insert.php', formdata, function(data) { 
       //Process post response 
      }); 
      //Reset Form 
      $('#myform')[0].reset(); 
      fetchRowCount(); 
     } 
    }); 
    //Fetch data from server 
    function fetchRowCount() { 
     $.ajax({ 
      url: 'php_includes/server.php', 
      dataType: "json", 
      success: function(data) { 
       $("#rows").html(data.rows); 
       $("#min").html(data.min); 
       $("#max").html(data.max); 
       $("#mean").html(data.total); 
       $("#last").html(data.last_entry); 
       //Show gage once json is receved from server 
       var gage = new JustGage({ 
        id: "gauge", 
        value: data.total, 
        min: data.min, 
        max: data.max, 
        title: "Sample Data" 
       }); 
      } 
     }); 
     //Scroll to Results 
     $('html, body').animate({ 
      scrollTop: $('#results').offset().top 
     }, 'slow'); 
     $("#gauge").fadeIn(slow); 
    } 
}); 

答えて

1

あなたが実際にフォームデータが正常に送信される前に、サーバーからデータを取得しようとしています。

は、そのコールバックの内側にポストした後に実行されなければならないものを入れてみてください:

//Post form data 
$.post('php_includes/insert.php', formdata, function(data) { 
//Process post response 
    //Reset Form 
    $('#myform')[0].reset(); 
    fetchRowCount(); 
}); 

スクロールダウンと同じ。サーバーからデータが正常に取得されたら、スクロールしてください。

//Fetch data from server 
    function fetchRowCount() { 
     $.ajax({ 
      url: 'php_includes/server.php', 
      dataType: "json", 
      success: function(data) { 
       $("#rows").html(data.rows); 
       $("#min").html(data.min); 
       $("#max").html(data.max); 
       $("#mean").html(data.total); 
       $("#last").html(data.last_entry); 

       //Show gage once json is receved from server 

       var gage = new JustGage({ 
        id: "gauge", 
        value: data.total, 
        min: data.min, 
        max: data.max, 
        title: "Sample Data" 
       }); 
       //Scroll to Results 
       $('html, body').animate({ 
        scrollTop: $('#results').offset().top 
       }, 'slow'); 
       $("#gauge").fadeIn(slow); 
      } 
     }); 
    } 
0

たぶん、あなただけの大成功の約束にスクロールを移動する必要があります。

//Fetch data from server 
    function fetchRowCount() { 
     $.ajax({ 
      url: 'php_includes/server.php', 
      dataType: "json", 
      success: function(data) { 
       $("#rows").html(data.rows); 
       $("#min").html(data.min); 
       $("#max").html(data.max); 
       $("#mean").html(data.total); 
       $("#last").html(data.last_entry); 

       //Show gage once json is receved from server 

       var gage = new JustGage({ 
        id: "gauge", 
        value: data.total, 
        min: data.min, 
        max: data.max, 
        title: "Sample Data" 
       }); 

       //Scroll to Results 
       $('html, body').animate({ 
        scrollTop: $('#results').offset().top 
       }, 'slow'); 
       $("#gauge").fadeIn(slow); 

      } 
     }); 
    } 
関連する問題