提交表单后如何停止页面跳到顶部？答案

【问题标题】：How to stop a page jumping to the top once a form is submitted?提交表单后如何停止页面跳到顶部？
【发布时间】：2013-11-28 21:01:35
【问题描述】：

我有一个人们可以输入值的地方。表单在更改或输入时提交，具体取决于他们想要更改的值。提交的值以相同的形式用于计算。问题：提交值后，页面将跳回顶部。有没有办法阻止这种情况发生。我想在表单上方的 div 标签上停止页面。

表单看起来像这样

<div id ="a"></div>
<div id ="b"></div>
<div id ="c"></div>
</form action="mypage.php#selfsubmit " method="post" id="self submit">
some calculations in between
<input name="field1" type="text" onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }" size="10" value= "">
<select name="field2" onchange="this.form.submit()" >
       <option value="w >w</option>
    <option value="x"<?php if ($_POST['field2']==x) {echo "selected='selected'"; } ?>>x</option>
    <option value="y"<?php if ($_POST['field2']==y) {echo "selected='selected'"; } ?>>y</option>
    <option value="z"<?php if ($_POST['field']==z) {echo "selected='selected'"; } ?>>z</option>
  </select>
some more calculations
</form>

我希望它提交表单，但提交后不要跳到页面顶部。由于#selfsubmit，它会在表单开始的那一刻停止。我希望它停止在例如div b。有没有办法做到这一点？欢迎任何帮助

【问题讨论】：

通过ajax提交，页面不会刷新
将目标#更改为您想要的位置
@charlietfl AJAX 并不是所有问题的答案
此id="self submit" 无效。 id 不能包含空格，使用下划线或删除你的情况下的空格 action="mypage.php#selfsubmit" 并且末尾的空格也可能会给你带来问题。
*第 4 行已编辑：<form action="mypage.php" method="post" id="self_submit">.

标签： javascript php jquery html forms

【解决方案1】：

来，试试看：

注意：多个<br> 仅用于测试目的。

您可以在提交后将锚标记<a name="selfsubmit"></a> 放置在您想要的任何位置。

代码：

<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>

<div id ="a"></div>
<a name="selfsubmit"></a>
<div id ="b"></div>
<div id ="c"></div>
<form action="mypage.php#selfsubmit" method="post">
some calculations in between
<input name="field1" type="text" onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }" size="10" value= "">
<select name="field2" onchange="this.form.submit()" >
    <option value="w >w</option>
    <option value="x"<?php if ($_POST['field2']==x) {echo "selected='selected'"; } ?>>x</option>
    <option value="y"<?php if ($_POST['field2']==y) {echo "selected='selected'"; } ?>>y</option>
    <option value="z"<?php if ($_POST['field']==z) {echo "selected='selected'"; } ?>>z</option>
  </select>
some more calculations
<input type="submit" name="submit" value="Submit">

</form>

<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>

另外，您的表单中有语法错误：

  </form action="mypage.php#selfsubmit " method="post" id="self submit">
---^

应该读作：

<form action=

</form前面有个/，肯定会让你头疼。

【讨论】：

【解决方案2】：

您的表单 ID 中有一个空格，但您的哈希没有。这可以解释为什么它没有跳转到您的表单。

【讨论】：