jQuery to Auto-Fill Fields with HTML Buttons

Have you ever noticed when placing an order on certain sites you can enter your shipping address and then have the option to check a box that says “my billing address is the same as shipping”? Then, like magic, the shipping address fields auto-fill? It’s a cool little efficiency isn’t it? Why type something twice when it’s identical? (Taken for granted a lot but cool non-the-less). Have you ever wondered how to do that?

Today’s post will be a slight detour back to Intacct but in a broader sense. While the example is Intacct-specific to something I needed (mostly wanted because it’s cool) for an app I’m building, the use-case is not and applies to any site where you can add html and jQuery.

So how do you do it?

Step 1: Create the Buttons in HTML

In Intacct you can add script components to pages. So when you edit the page you can drag and drop a script component. Then add the following html:

Apply GL Account to All Lines

What does it do? This just adds a button which says “Apply GL Account to All Lines”. The button will eventually copy the GL Account in one field to additional fields in the table below but for now we just need to set up the button. This way the user has something to click to invoke the action. Also, we’ll use the ID we gave it “btn-third” in our jQuery to tell the jQuery when and what to do when that button is clicked. (Yes, I know what you’re thinking “third? why?” Because I have two other buttons that do other cool things).

Perfect! Step 1 is done!

Step 2: Write the jQuery

Here is the script so you can see it. I’ll explain so that you can take the method and logic behind it and take advantage of it for your use case.

$ = jQuery.noConflict();
$(function() {

$(‘.btn-third’).on(‘click’, function() {
var index = $(this).index();
var input = $(“#txtR_gm_app_account”).val();
for (var i = 0; i

As a side note, I ran into two complexities with my situation:

  1. I wanted the GL Account which was entered by the user to be copied to multiple fields below (not just one field).
  2. I had to figure out how to get the value to copy to the other fields without actually saving the record. I want the user to see those fields copied down when they push the button. This took a while for me to figure out. So I needed to figure out how to take values in a form not yet saved and copy them down. .val() was my lightbulb moment. Until I figured that out I did not understand why although I was calling the right field id’s nothing was happening.

Explaining the Code:

  • $(‘.btn-third’).on(‘click’, function() {

This portion of the script says that on clicking the “btn-third” button, execute the following function.

  • var index = $(this).index();
    var input = $(“#txtR_gm_app_account”).val();

This portion declares the variables to be used in the function. We are declaring what input field I want to copy down to all the other fields “#txtR_gm_app_account” and giving it basically a variable called input. (If you are like me and don’t have a background in javascript/jquery knowledge I think of it like Algebra. You’re saying x = … , y = … , then the function says solve x + y). To find my field ID I just right clicked, inspected the page and copied the css field id.

Additional very important thing for me was the .val() portion without that, it didn’t work. The .val() allowed me to capture a value that was input into the form without having saved the record itself.

The other variable is the index/array. Since I’m auto-filling multiple fields I needed to declare the array.

  • for (var i = 0; i < 5; i++) {
    $(‘#txtR_gm_app_account’ + [i]).val(input);
    }

The fields I am auto-filling all start with ‘#txtR_gm_app_account’ and then a # (ex; #txtR_gm_app_account0, #txtR_gm_app_account1, #txtR_gm_app_account2 … ). So the ‘#txtR_gm_app_account’ + [i] goes through my fields started at 0 (i = 0) until it get’s through i < 5 and loops through each field.

Then the second portion tells it what to put in that field. In my case I am using the .val() to fill it with the variable I declared to equal input ((“#txtR_gm_app_account”).val()) .

So when I push the button, the jQuery loops through all my #txtR_gm_app_account fields and fills it with the value in #txtR_gm_app_account .

Before Clicking the Button:

Screen Shot 2017-04-20 at 8.10.29 PM.png

After Clicking the Button:

Screen Shot 2017-04-20 at 8.10.43 PM.png

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s