Question

Forms - Use custom HTML field to put focus on previous form field

Forms

Updated February 18, 2022

asked on February 17, 2022 • Show version history

Hello,

We have a customer with a fairly complex form. The first thing they do is pick an option from a radio button, and then certain fields are displayed based on what they pick. The form will route back to the same user's inbox until they've filled out certain key fields. This allows them to submit the form over and over again as information is acquired, but doesn't move on the next step until we have the key pieces of information that we need.

What I'd like to do is add custom HTML to the bottom of the form that says something like "this form will route back to your inbox until you fill out Field A, Field B, and Field C." I'm able to link each field, so that when the user clicks 'Field A' in the custom HTML field, the page moves so that Field A is displayed at the top. That's fine, but if the field is toward the bottom of the page, nothing really happens - there isn't enough "room" for that field to be displayed at the top. But, if I could also add the yellow background (screenshot below) that appears on a field when a field is selected, I think that would direct the user's attention to the field in question well enough. So, I'm probably asking how to focus on a particular form field when a link is clicked in a custom HTML field.

Thanks!

0 0

Answer

SELECTED ANSWER

replied on February 18, 2022

This should work as a Custom HTML element - without separate Javascript.

This is assuming your three fields are numbered as follows:

q11 / Field11
q12 / Field12
q23 / Field23

Which is the numbering @████████used in the earlier comment.

<p>THIS FORM WILL ROUTE BACK TO YOUR INBOX UNTIL YOU PROVIDE THE
<a href="#q11" onclick="document.getElementById('Field11').focus();">
BOL NUMBER
</a>
, 
<a href="#q12" onclick="document.getElementById('Field12').focus();">
UPLOAD THE BOL
</a> 
ITSELF, AND THE 
<a href="#q23" onclick="document.getElementById('Field23').focus();">
FREIGHT CHARGE
</a>
 ISN'T 0.
</p>

2 1

Replies

replied on February 17, 2022 • Show version history

$('#q41 input').click( function() {

$('#q44 input').focus();

});

0 0

View 4 previous replies

replied on February 17, 2022

Hi James,

How would I reference what is clicked, when in my case it's 1 of 3 links in my custom HTML field?

<p>THIS FORM WILL ROUTE BACK TO YOUR INBOX UNTIL YOU PROVIDE THE <a href="#q11">BOL NUMBER</a>, <a href="#q12">UPLOAD THE BOL</a> ITSELF, AND THE <a href="#q23">FREIGHT CHARGE</a> ISN'T 0.</p>

0 0

replied on February 17, 2022 • Show version history

You need to create a click handler for each value. I've never tried it, but I'd take a stab at something like

$("#q31 p a").click(function() {
   if ($(this).text() == "BOL NUMBER")
       $("#q44 input").focus()
   else
       etc...
});

0 0

SELECTED ANSWER

replied on February 18, 2022

This should work as a Custom HTML element - without separate Javascript.

This is assuming your three fields are numbered as follows:

q11 / Field11
q12 / Field12
q23 / Field23

Which is the numbering @████████used in the earlier comment.

<p>THIS FORM WILL ROUTE BACK TO YOUR INBOX UNTIL YOU PROVIDE THE
<a href="#q11" onclick="document.getElementById('Field11').focus();">
BOL NUMBER
</a>
, 
<a href="#q12" onclick="document.getElementById('Field12').focus();">
UPLOAD THE BOL
</a> 
ITSELF, AND THE 
<a href="#q23" onclick="document.getElementById('Field23').focus();">
FREIGHT CHARGE
</a>
 ISN'T 0.
</p>

2 1

replied on February 18, 2022

Nice

1 0

replied on February 18, 2022

Awesome. Thanks, Matthew!

1 0

replied on February 18, 2022

@████████ any idea why the focus doesn't work the same on a file upload field as it does on a regular input field? It'll move the page, but it won't put the focus on the upload field like it does other fields.

0 0

replied on February 18, 2022

It worked for me testing on version 10.2.

It's possible something has changed between versions if you are on a newer version than that. For example, if the q12 / Field12 identifiers are different somehow.

Unfortunately, I don't have my test server running quite yet, so I can't test in version 11.

0 0

You are not allowed to follow up in this post.

Question

Question

Forms - Use custom HTML field to put focus on previous form field

Answer

Replies

Sign in to reply to this post.