How to set focus on the Submit button of the form rather than the first action item on form load?
Hi All,
I have a requirement that as soon as my page loads, I need to set the focus on the Submit button of the form. Current behavior is that it is gaining focus on the first action item of the form which is the text input in my scenario as it has Post Value action defined.
Can this be modified please? It is a high priority issue/bug from the client directly. Your early response/comments really helps.
Thanking you.
Accepted Solution
Pegasystems Inc.
US
Hi,
Please paste the below code into userWorkForm.
<script>
setTimeout(function(){
document.querySelectorAll('[data-test-id="myButton"]')[0].focus();
}, 1000);
</script>
Here, I have given test-id of button is "myButton" (refer 1.png).
I have verified, and it is working at my end. Please confirm.
Regards,
Rachit
Pegasystems Inc.
US
Hi,
By default, the focus is set to the first element only. In case you need to have it on submit. You have to write your own javascript method something like.
window.onload - Call a function where set focus to this element(button) using some attribute value of this button.
Check this and let me know in case you need any more help on this.
Regards,
Rachit
Accepted Solution
Pegasystems Inc.
US
Hi,
Please paste the below code into userWorkForm.
<script>
setTimeout(function(){
document.querySelectorAll('[data-test-id="myButton"]')[0].focus();
}, 1000);
</script>
Here, I have given test-id of button is "myButton" (refer 1.png).
I have verified, and it is working at my end. Please confirm.
Regards,
Rachit
EPAM Systems, Inc.
ES
Hi Rohit,
Thanks for posting on PSC.
Use the below code in section, It will set the focus to a first available button on UI skipping hidden or disabled button.
Modify it as per your requirement.
Hi Rohit,
Thanks for posting on PSC.
Use the below code in section, It will set the focus to a first available button on UI skipping hidden or disabled button.
Modify it as per your requirement.
Kindly notify, if it helps you.
Thanks,
Asif
Accenture
IN
Thank you Asif. I will try out the idea posted by you. I actually used the snipped sent by Rachit in UserWorkForm and it did work.
Thank you all for your quick responses.
EPAM Systems, Inc.
ES
You are welcome.
Adding to Rachit, you can use below code to skip the disabled or hidden buttons. As DOM structure still contains these buttons so if one of these buttons are above the first available button in DOM, unfortunately it may pick up. I have put up validation condition to select only available button.
while(i < customIndex){
if(!customFocusButtons[i].disabled && customFocusButtons[i].type !== 'hidden'){
customIndex=i;
if(customFocusButtons[customIndex].type === "button"){
customFocusButtons[customIndex].focus();
break;
}
Thus the code was bit lengthy.
You are welcome.
Adding to Rachit, you can use below code to skip the disabled or hidden buttons. As DOM structure still contains these buttons so if one of these buttons are above the first available button in DOM, unfortunately it may pick up. I have put up validation condition to select only available button.
while(i < customIndex){
if(!customFocusButtons[i].disabled && customFocusButtons[i].type !== 'hidden'){
customIndex=i;
if(customFocusButtons[customIndex].type === "button"){
customFocusButtons[customIndex].focus();
break;
}
Thus the code was bit lengthy.
Accenture
IN
Thank you all for the resolutions.
Unfortunately i had to reopen this thread. My issue got fixed for normal login but when i try to login from SSO, issue still persists. I mean the focus is not coming to the submit button. It is again getting focus on the first action item.
Any thoughts please!!!
Pegasystems Inc.
US
Hi,
I have added value "1000" in my script which means 1 second. In case of SSO, it may be possible that the page is taking more to load and thus it is creating an issue. Can you please increase this time to 2000 or 3000 and verify the scenario.
Regards,
Rachit
Accenture
IN
Hi Rachit,
I tried the approach suggested but no luck. Is it anything related to browser compatibility issues? I am facing the issue both in IE and chrome. I use these browsers generally.
Pegasystems Inc.
US
Hi,
The solution provided earlier was generic. I am not sure why that was working for you. However, what you can do, create a non -autogenerated section inside your current section and add the below code there.
<input id="my-input" autofocus="autofocus" style="" />
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("my-input").focus();
}
</script>
I have kept the style as empty for now. But you can modify as per your requirement.
Please let me know if this works for you in both the scenarios.
Regards,
Rachit