1

I don't want to automatic scroll up the page when a form I submitted. I want to stay on the same position as when the form was submitted. How can I do that?

<script type="text/javascript">
    var frm = $('#form');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('ok');
            }
        });

        ev.preventDefault();
    });

          <script>
    function submitForm2()
     {
          document.getElementById('form').submit();
           popsup();
     }
      </script>

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

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

I tried the solutions in the link; return false results in the page opening in a new window and in the new window the page autoscrolls to top after submit.

"#" or #! in action = form isn't submitted and page scrolls to top.

javascript:void(0); - form doesn't get submitted and page still scrolls to top

Peter Badida
  • 11,310
  • 10
  • 44
  • 90
anon
  • 237
  • 2
  • 11
  • You could try adding `return false;` at the end of your function. – swiss_blade Nov 12 '15 at 22:09
  • 2
    Possible duplicate of [How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?](http://stackoverflow.com/questions/1601933/how-do-i-stop-a-web-page-from-scrolling-to-the-top-when-a-link-is-clicked-that-t) – Zakaria Acharki Nov 12 '15 at 22:10
  • return false doesnt work. Tried the solutions in the link, doesnt work. – anon Nov 12 '15 at 22:21
  • 2 two ways, 1) you can do it on ajax when submitting the form or 2) after the page request put hash tag in your URL #targetlocation , that should do the trick – Drixson Oseña Nov 12 '15 at 23:46
  • Use AJAX instead of submitting the form natively. – user2867288 Nov 13 '15 at 00:03

1 Answers1

2

document.getElementById('form').submit(); doesn't fire the frm.submit handler. Use $('#form').submit() instead, because the jQuery version of submit() calls any onsubmit handlers, whereas vanilla Javascript submit() bypasses them.

Edit

Another thing - your script that adds the submit handler function is being executed immediately - before the form has been rendered. So it's probably failing. Also you seem to have a wayward <script> tag in there. Try this:

<script type="text/javascript">
    $(document).ready(function() {
        var frm = $('#form');
        frm.submit(function (ev) {
            $.ajax({
                type: frm.attr('method'),
                url: frm.attr('action'),
                data: frm.serialize(),
                success: function (data) {
                    alert('ok');
                }
            });
            ev.preventDefault();
        });
    });

    function submitForm2() {
        $('#form').submit();
    }
</script>
Doug McLean
  • 1,289
  • 12
  • 26
  • Hm still scrolls up to top. I dont know if i have included jquery wrong or something – anon Nov 14 '15 at 00:43
  • The form doesnt seem to be submitted when I edited to that. "submitForm is not defined" – anon Nov 14 '15 at 01:02
  • Hmm, could be because your form's `action` attribute is empty. In a basic HTML form, you can do that, as it just submits to the current URL... but it could be that in jQuery it stops it from submitting. – Doug McLean Nov 14 '15 at 01:09
  • Ha just saw your previous comment - glad to help :) – Doug McLean Nov 14 '15 at 01:10