Hi,
I have a long page with a v4 ChronoForm at the bottom which has a standard captcha verification.
I would like to set the focus to the form after submission whether there is a captcha verification error or successful submission so that the error or thank-you message is obvious to the submitter.
Based on the FAQ at http://www.chronoengine.com/faqs/2624-handling-serverside-validation-errors---.html (thanks Bob), I have come up with the following code:
which I have placed in a "Load JS" action as the first item in the "On Load" section.
I have included an ID in my article html like this:
Unfortunately, the focus is not being set after submission.
Can you see anything obvious I am doing wrong?
Thanks very much for any help you can give me.
Neil
Edit:
OK, it looks like the JavaScript focus function doesn't work on ids so I changed the JavaScript code to this:
Now the page scrolls nicely to the form if there is a captcha error but when the form is submitted successfully, the JavaScript is not being loaded.
Is there a way to have the page scroll to the thank-you message?
Thanks,
Neil.
Further Edit:
OK this last step can be achieved by adding some code to the thank-you message like this:
Feel free to share more elegant solutions if you have come up with any!🙂
I have a long page with a v4 ChronoForm at the bottom which has a standard captcha verification.
I would like to set the focus to the form after submission whether there is a captcha verification error or successful submission so that the error or thank-you message is obvious to the submitter.
Based on the FAQ at http://www.chronoengine.com/faqs/2624-handling-serverside-validation-errors---.html (thanks Bob), I have come up with the following code:
<?php $event = JRequest::getVar('event'); ?>
<?php if ( $event == 'submit' ): ?>
window.addEvent('domready', function() {
$('inquiry-form').focus();
});
<?php endif; ?>which I have placed in a "Load JS" action as the first item in the "On Load" section.
I have included an ID in my article html like this:
<div id='inquiry-form'>
<div>{chronoforms}Inquire{/chronoforms}</div>
</div>Unfortunately, the focus is not being set after submission.
Can you see anything obvious I am doing wrong?
Thanks very much for any help you can give me.
Neil
Edit:
OK, it looks like the JavaScript focus function doesn't work on ids so I changed the JavaScript code to this:
<?php $event = JRequest::getVar('event'); ?>
<?php if ( $event == 'submit' ): ?>
window.addEvent('domready', function() {
document.getElementById('inquiry-form').scrollIntoView();
});
<?php endif; ?>Now the page scrolls nicely to the form if there is a captcha error but when the form is submitted successfully, the JavaScript is not being loaded.
Is there a way to have the page scroll to the thank-you message?
Thanks,
Neil.
Further Edit:
OK this last step can be achieved by adding some code to the thank-you message like this:
<?php
$document = JFactory::getDocument();
$js = "
window.addEvent('domready', function() {
document.getElementById('inquiry-form').scrollIntoView();
});
";
$document->addScriptDeclaration($js);
?>
<h2>Thank you for your interest.</h2>
<p>Your inquiry has been submitted and we will be in contact soon.</p>Feel free to share more elegant solutions if you have come up with any!🙂
This topic is locked and no more replies can be posted.
