how to shift focus to result of form submission

Posted by dianacastillo on June 10, 2013 at 3:41pm

On form submit, focus should be shifted to the alert at the top of the page that identifies success or failure so that the screen readers will get it . How can I do this? thanks

Comments

Fragment in the action

Posted by liam morland on June 10, 2013 at 6:29pm

Give the alert an id attribute and put the fragment identifier in the form action. This is how it can be done in the Drupal form API:

<?php
$form['#action'] = '?#alert';
?>

how to put the id into the form action

Posted by dianacastillo on June 11, 2013 at 1:12pm

Hi, the id in drupal is 'messages' , but how can I put that into the drupal form api without modifying the core ?
thank you,
diana

How are you making the form?

Posted by liam morland on June 11, 2013 at 1:56pm

How are you making the form? My answer assumed you were using the form API in a custom module.

the forms

Posted by dianacastillo on June 11, 2013 at 2:02pm

I am talking about the forms for the login and contact form, I am not using a custom module, although I do modify the template using a function in the template.php that calls the templates , user-login.tpl.php and contact-site-form.tpl.php
so where can I I modify the form action as you recomend above.

You can probably use

Posted by liam morland on June 11, 2013 at 2:33pm

You can probably use hook_form_alter() to do what you need.

shift

Posted by dianacastillo on June 11, 2013 at 3:29pm

okay i've added this in my template.php in the function

mythemename_form_alter 
if ($form_id == 'contact_site_form'){
   $form['#action'] = '?#messages';
}

but the focus still does not go to the div which has the id messages when you submit the form using the keyboard.

Does #messages appear in the

Posted by liam morland on June 11, 2013 at 3:34pm

Does #messages appear in the URL after you submit the form? Have you checked that the hook implementation is actually running? (Use dsm() from the Coder module.) The hook implementation might have to be in a module, not a theme.

yes #messages appears in the rul

Posted by dianacastillo on June 11, 2013 at 3:45pm

after I submit the form, where "root_url/contact" used to be in the url before I added this, now it has
"root_url/#messages" as the url
so the hook implementation is running.

how can I tell where the focus is anyways?

The page will scroll to the

Posted by liam morland on June 12, 2013 at 5:53pm

The page will scroll to the focus point, if the fragment is pointing to an id attribute that exists.