I am creating a form that has the same information in two different fields on the same form. I am wanting to auto populate the field with the information that is initially entered into the other field
I am creating a form that has the same information in two different fields on the same form. I am wanting to auto populate the field with the information that is initially entered into the other field
Both Chris's and Blake's answers are valid. I wanted to chime in and say that you need to target the correct element. This is a bit tricky if you're not familiar with the way the Document Object Model is set up in Laserfiche Forms.
I posted a screenshot below. The email field is focused, and let's say that I want to write a bit of code so that when I type something into that field, it is replicated immediately in the next field over (Phone Number).
If you look at the DOM that I'm inspecting, you see that there are two ids shown in red squares. The first one is "q3." This is the id that will be shown for that field in the CSS/JavaScript editor in Forms. A lot of people use that id when they try to target the fields (to get/set their values, for example). But that won't work. If you examine it more closely, you see that q3 simply represents the container <li> for the actual input field, which is Field3 (highlighted). So that is what you need to target in order to get/set values.
You can do that in two ways: either directly with $('Field3') or indirectly with $('q3 input'). The latter says, "find the element with id q3, then dig down until you find the first input element under it." In this case, it is Field3.
So then the code Blake and Chris shared would become (in my case):
$('#Field3').keyup(function () { $('#Field4').val(this.value); });
Or:
$('#q3 input').keyup(function () { $('#q4 input').val(this.value); });
Both of these will work.
This tripped me up when I first started fiddling with Forms using JavaScript (which I was also new to at the time). So I hope it helps.
Instead of using field identifiers, I've found it is much easier to add CSS classes to the fields you're targeting and then use them with your JavaScript. This is the simplest approach and does not involve looking at the HTML markup of the form. This page of the online help has more information about getting started with JavaScript in Forms that might be useful for you.
Keep in mind that if you're targeting an input box, you'll still need to include that in your selector, even if you're using a class.
So, instead of:
$('#q3 input').keyup(function() {...});
You'd add a class (like myClass) to the field and then use:
$('.myClass input').keyup(function () {...});
You'll just have to assign the field values:
$('#firstFieldId').keyup(function () { $('#secondFieldId').val(this.value); });
Javascript:
$("#Field1").keyup(function(){
$("#Field2").val($(this).val());
});
This will type it in the second field as they type.
Hi James,
Can you provide more information about what kind of Form and why fields information need to be duplicated?
Thanks,
Abby
It's a bill of sale form. It has a couple of fields that are redundant like state and county I would like them to be populated in both places when it is entered once.