How to stop form submit from refreshing to the top of the page (modular)?

Sorry if the title is confusing. Basically I have a modular form and when you click submit the page refreshes (which is fine) but it sends the user to the top of the page - and since my form is at the bottom, this is a pain. Is there a way I can make the page automatically refresh to the form instead?

I've tried using the ScrolltoTop js plugin in my base.html.twig file but it doesn't seem to recognise the class name I used for the submit button in the form's modular.md file. If you're curious I'll post the code below:

This is in the modular.md file:

TXTCopy

buttons:

• type: submit
  value: Submit
  classes: form-button

This is in the base.html.twig file:

$('.form-button').click( function() {
$('html, body').animate({
scrollTop: $('#form').offset().top
}, 400);
});

I imagine there is a simple solution to this but I couldn't find anything. Thank you!

Hi
If you use ajax submit you won't have that annoying page refresh - its easy to change over - the instructions are here: how-to-ajax-submission

Then you probably don't really need to scroll anywhere but for me the submission message comes at the end of the page so I scroll down to the submission message so the user don't miss it. Basically its the same code from the learn site with an added scrollto at the end.

<script>
$(document).ready(function(){

    var form = $('#contact-us');
    form.submit(function(e) {
        // prevent form submission
        e.preventDefault();

        // submit the form via Ajax
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            dataType: 'html',
            data: form.serialize(),
            success: function(result) {
                // Inject the result in the HTML
                $('#form-result').html(result);
            },
            complete: function(result) {
                $('html, body').animate({
                    scrollTop: $("#form-result").offset().top
                }, 2000);   
            }
        });
    });

});
</script>

I'm experiencing the same problem as described in the main post. I've read the documentation, but the instructions are not very clear for me. Where should I paste the following code:

<div id="form-result"></div>

<script>
$(document).ready(function(){

    var form = $('#ajax-test-form');
    form.submit(function(e) {
        // prevent form submission
        e.preventDefault();

        // submit the form via Ajax
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            dataType: 'html',
            data: form.serialize(),
            success: function(result) {
                // Inject the result in the HTML
                $('#form-result').html(result);
            }
        });
    });
});
</script>

? Should it be located in the contact_form.html/twig after:

{% include "forms/form.html.twig" with {form: forms('contact_form')} %}

Hi
Yes after is correct,
Your form is created here:
{% include "forms/form.html.twig" with {form: forms('contact_form')} %}

The results than come back to (assuming you have a submission response):
<div id="form-result"></div>

And that JS <script> code does the actual submission.
If you want to auto scroll down after submission you'll need to add this bit back in

   complete: function(result) {
        $('html, body').animate({
            scrollTop: $("#form-result").offset().top
        }, 2000);  

also if you're using a modular page you'll probably want this code right in the module template rather than with the rest of the JS just to make sure it is getting used.

Not sure if I'm doing it right. Should I add it in my contact_form.html.twig file, so it looks like this?

    {% include "forms/form.html.twig" with {form: forms('contact_form')} %}

<div id="form-result"></div>

<script>
function(result) {
        $('html, body').animate({
            scrollTop: $("#form-result").offset().top
        }, 2000);
</script>

The order of your fields is right and should all go in your contact_form.html.twig as you mentioned.

If you want the form to submit, and then scroll down to that "form-result" div (where you would have some sort of confirmation message) then you would need everything from the <script></script> tag from my original post. Your reply cut out the part that scrolls down and now you've only got the scrolling bit left so its getting a little confusing. Also my original post left off the code blocks bits as those are theme specific.
This is the code from my actual page however your mileage will vary as I use bootstrap, this is from a page (not a module) and have a JavaScript block at the "bottom" which may or may not match your particular setup. Hopefully it helps

contact.html.twig

{% block content %}
 {{ parent() }}
<section class="section-gen">
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      {% include "forms/form.html.twig" with { form: forms("contact-us") } %}
    </div>
  </div>
</div>
</section>

<section class="section-gen">
  <div class="container">
    <div class="row">
      <div class="col-xs-10 col-xs-offset-1">
        <div id="form-result"></div>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block bottom %}
{{ parent() }}
<script>
$(document).ready(function(){
  var form = $("#contact-us");
  form.submit(function(e) {
      e.preventDefault();

      $.ajax({
          url: form.attr("action"),
          type: form.attr("method"),
          dataType: "html",
          data: form.serialize(),
          success: function(result) {
              $("#form-result").html(result);
          },
          complete: function(result) {
              $("html, body").animate({
                  scrollTop: $("#form-result").offset().top
              }, 2000);   
          }
      });
  });    
});
</script>
{% endblock %}

Thanks, I'll try it out and let you know how it goes.

oops just noticed a bit of completely unrelated JS near the end that I've just deleted out.

You can set action: '#anchor'. Make sure to quote the anchor, otherwise it wont work! Each modular should have an id set by the theme, you can checkout the twig template for that or simply add an id yourself in your modular markdown file.