Question

任何人都可以告诉我如何阻止我的表单页面显示此jquery脚本的结果只有几分之一秒才能滚动回到表单并重置？

我打算发生的是表单向下滚动到显示结果的锚#results。这样可行但结果仅显示一瞬间，页面重新回到表单重置。

我确定我应该使用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);
    }
});

Answer 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);
          }
      });
  }

Answer 2

也许你只需要将滚动条移动到成功的承诺中：

  //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);

          }
      });
  }

如何阻止表单自动重置？

2 个答案: