CODEWITHSUNDEEP
htmldjangoscroll
Logan Lee
Logan Lee

Reputation: 997

Scrolling index.html to #contact after form submission (django)

index.html

<section id="contact">
   <form id="contactForm" method="get" action="{% url 'contact-form' %}">
   ...
      <button class="btn btn-common" id="submit" type="submit">Submit</button>
   </form>
</section>

where {% url 'contact-form' %} expands to contact-form/

After submitting this form, I want the page to scroll to #contact where the form is located(if there are form validation errors).

I've tried

$("#contactForm").submit( function() {
    $('html, body').animate({
         scrollTop: $("#contact").offset().top
    }, 2000);
    return false;
});

But the scroll doesn't work.

Upvotes: 0

Views: 416

Answers (1)

Matthew Gaiser
Matthew Gaiser

Reputation: 4763

Submitting a form loads another page, so the $("#contactForm").submit( function() is wiped away as soon as it is called.

Change your {% url 'contact-form' %} to {% url 'contact-form' %}#contactForm might do the trick for you.

Upvotes: 1

Related Questions