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:
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')} %}
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.
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 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
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.