js Load div on invalid form submit

guysmiley 10 Sep, 2016
I think I put this in the wrong forum last time...

I have a form located a ways down the page and when a required field isn't filled properly, the form reloads with the error message, but the user can't see the error message because it's wayyyy down the page.

I tried inserting this code:

jQuery(document).ready(function(jQ){
  jQ('#gkBottom1-3')[0].scrollIntoView();
});


in a js action in the onFail event, but it did nothing as far as I can see (though #gkBottom1-3 is a valid div tag).

Anyone know why this method does not work?
guysmiley 15 Sep, 2016
Hey folks,
Any thoughts here... still stumped.
GreyHead 17 Sep, 2016
Hi guysmiley,

This seems to work OK when I test
jQuery(document).ready(function(jQ){
  jQ('html,body').animate( { scrollTop: jQ('.gbs3').offset().top }, 'slow');
});
The jQ('.gbs3') selector sets the element scrolled to - in this case it is the CF wrapping div, if you have more than one form on the page or want to scroll to a particular point or message then you can use an id instead jQ('#some_element_id')

Bob
guysmiley 01 Oct, 2016
Hi Greyhead,
Thanks for the code, and yes, it works fine on a successful form submit. However, if there's an error in the captcha, the scroll effect does not work (despite the fact that the js is identical for both onSuccess and onFail. Is there something wrong with me setup (see attached)?
GreyHead 01 Oct, 2016
Hi guysmiley,

The Load JS action in the On Fail event needs to be before the Event Loop action otherwise it will never run.

Bob
guysmiley 01 Oct, 2016
You, sir, are a steely-eyed-missile-man.
This topic is locked and no more replies can be posted.