[Solved] Set Focus Back to Form After Submission

ozneilau 16 Aug, 2013
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:

<?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!🙂
GreyHead 19 Aug, 2013
Hi Neil,

Thank you, I've added parts of your post to a couple of FAQs here and here.

Bob
ozneilau 19 Aug, 2013

Hi Neil,

Thank you, I've added parts of your post to a couple of FAQs here and here.

Bob


Thanks Bob, it's rare I ever have to solve a ChronoForm issue becasue you've usually already posted a solution on the forums!🙂

Neil.
This topic is locked and no more replies can be posted.