How to stop a page jumping to the top once a form

Question

I have got a from where people can input values. The form is submitted on change or on enter depending which value they want to change. The submitted values are used in the same form to calculate. The problem: once the values are submitted the page jumps back to the top. Is there way to stop this from happening. I would like to stop the page on a div tag just above the form.

The form looks something like this

<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>

I would like it to submit the form how ever once submitted don't jump to the top of the page. At the minute it stops where the form start because of the #selfsubmit. I would like it to stop on e.g. div b. Is there a way to do this? Any help welcome

Answer 1

Here, give this a try:

Note: Multiple <br>'s are for testing purposes only.

You can place the anchor tag <a name="selfsubmit"></a> anywhere you want, after submission.

Code:

<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>

Plus, you have a syntax error in your form:

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

which should read as:

<form action=

There is a / in front of </form that will surely cause you headaches.

Answer 2

Your form ID has a space in it, but your hash does not. That would explain why it is not jumping to your form.