提交表单时停留在当前位置？答案

【问题标题】：Stay at current position at form submit?提交表单时停留在当前位置？
【发布时间】：2015-11-15 15:25:39
【问题描述】：

提交表单时如何保持在当前位置而不是来到页面顶部？

     <script>
      $(document).ready(function(){
        $('#ok').click(function(){
          var dt=$('#form').serialize();
          $.post('data.php',dt,function(data){
          })
         });
      });
      </script>


<script>
 function submitnow() {
        $('#form').submit();
}
</script>

<div onclick='submitnow();'></div>

    <form action='' method='post' id='form'>
            <input type="hidden" id="ok" name='ok' value="ok">
    </form>

更新非常抱歉，我忘记发布我使用 onclick 提交的表单。但我认为这只是将代码添加到函数中，但事实并非如此：/

<script>

    function submitnow() {
  $(document).ready(function(){
    $('#form').submit(function(){
      var dt=$(this).serialize();
      $.post('data.php',dt,function(data){
      });

        return false;
     });
  });
}
  </script>

这是我目前使用的代码，它会将我滚动到顶部：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
  $(document).ready(function(){
    $('#form').submit(function(){
      var dt=$(this).serialize();
      $.post('data.php',dt,function(data){
      });

        return false;
     });
  });
  </script>

<script>
 function submitnow() {
        $('#form').submit(function(){

        });
}
</script>

 <div onclick='submitnow();'></div>

<form action='' method='post' id='form'>
        <input type="hidden" id="ok" name='ok' value="ok">
</form>

【问题讨论】：

不，$(document).ready(function(){ $('#form').submit(function(){ var dt=$(this).serialize(); $.post('data.php',dt,function(data){ }); return false; }); }); 必须放在函数之外。然后在函数 submitnow() 中，您可以调用 $("#form").submit(); 来触发提交
嗯好吧，我从一开始就是这样做的，但我不明白为什么页面在提交时仍然向上滚动：S
不，一开始您处理了按钮的 .click 事件（请参阅您的问题）。您必须使用 return false 处理 .submit 事件（请参阅我的评论），否则您的页面将重新加载并向上滚动
哦，我明白了。但我现在使用 .submit 并且它仍然滚动.. 我会在几秒钟内用当前代码更新帖子
在 submitnow() 函数中，您必须触发提交，而不是处理提交。 function submitnow() { $('#form').submit(); } 我测试并正确调用了 .post() （又名 ajax 请求）。如果它仍然无法按预期工作，请提供页面链接或完整的 jsfiddle（不是这个小示例）

标签： javascript

【解决方案1】：

要捕获提交事件并调用 ajax 而不是提交表单，请使用

$("#form").submit(function () {
    var dt = $(this).serialize();
    $.post('data.php',dt,function(data) {
    });

    return false;
});

感谢@dfsq 的改进

更新：

查看此JSFiddle 以获取有效的 ajax 提交

【讨论】：

最佳答案：正确使用onsubmit事件而不是按钮onclick。如果不重新查询 DOM 可能会更好：$(this).serialize().
谢谢。特别是在这个例子中，“ok”不是按钮而是隐藏类型。
嗯，我也更新了我的帖子。我不知道这是否导致它不起作用

【解决方案2】：

试试这个

$(document).ready(function(){
    $('#ok').click(function(e){
      e.prenevtDefault();
      var dt=$('#form').serialize();
      $.post('data.php',dt,function(data){
      });
     });

【讨论】：

【解决方案3】：

你可以做三件事：

1) （不需要 JavaScript）在页面提交时您希望滚动到的位置添加命名锚点，并将名称添加到操作中。这将导致页面滚动到该位置。为此，您需要在创建页面时知道希望页面滚动到的位置。

<a id="tohere"></a>
<form action="#tohere" ...

2)（需要 JavaScript）使用 ajax 表单提交，因此页面不会重新加载（有关如何执行此操作，请参阅 JQuery 示例的其他答案）

3)（需要 JavaScript）将当前位置存储在 cookie 或本地存储中，让 JavaScript 读取数据并在页面加载时滚动到该位置。

【讨论】：