You are viewing limited content. For full access, please sign in.

Question

Question

How can I populate a field in forms automatically when a user makes a radio button, checkbox, or drop-down selection?

asked on December 13, 2013 Show version history

Eric,

Attached are some screenshots...one thing I would like to point out..right now, I'm working on just getting the first two sections to work figuring I can repeat it with others as I do have more than 2 sections that this will apply to...however, I can only get it to work for the first section (first section that needs this is 07-Real Estate Interests (Ammended)...the rest is listed 08, 09, etc...hopefully the screenshots below give you a clear idea. 

 

Edit: This question is a continuation of this forum post.

Section 07.PNG
Section 08.PNG
Section 09.PNG
Section 07.PNG (24.3 KB)
Section 08.PNG (26.56 KB)
Section 09.PNG (27.64 KB)
0 0

Answer

APPROVED ANSWER
replied on December 20, 2013

Answer summary:

Daryl wanted to auto-fill certain form fields with "See Prior Filing" when the form submitter selected the "NO" option for a radio button field. This requires some JavaScript. To do this, you'll add the radio class to the radio button and the autofill class to each field you want to fill with "See Prior Filing." Here's the code for that.

$(document).ready(function () {
  $('.radio input').change(function () {
       $(".radio input:checked").each(function(){
    if ($(this).val() == "No")
    {

    $('.autofill input').val('See Prior Filing');
  }
    else if ($('.autofill input').val() === 'See Prior Filing')
      $('.autofill input').val('')
    })     
  })
})

 


The code above works if the user selects an option from a checkbox or radio button field and it automatically fills fields that aren't in a collection or table. Using the '#q283 input' selector works for radio buttons and checkboxes. For drop-down fields, use '#q283 select' as the selector. Like so:

$('#q281 select').change(function () {
 
        if ($(this).val() == "No") {
            $('.autofill input').val('See Prior Filing');
            if ($('input[name="routingResumeId"]').val() == "") {
                $('#q304').hide(); //section ID
            }
             
        }
        else if ($('.autofill input').val() === 'See Prior Filing')
            $('.autofill input').val('')
        $('#q304').show(); //section ID
    })

Because the fields within a collection or table are repeatable, they have a special ID attribute that ensures their uniqueness.

Here's the code to fill fields within a table. If the user selects no, the table fields are filled with "See Prior Filing," the fields become read-only, and the Add row button is hidden.

$(document).ready(function () {
 
    $('#q283 input').change(function () {
        $("#q283 input:checked").each(function () {
            if ($(this).val() == "No") {
                $('#q68 tbody tr').each(function () {
 
                    $(this).find('.autofill input').each(function () {
                        $(this).val('See Prior Filing');
                    })
                })
                $('#q68 input').attr('readonly', 'true'); //table selector
 
                $('#q69').hide(); //table add button selector
            }
            else
                $('#q68 tbody tr').each(function () {
 
                    $(this).find('.autofill input').each(function () {
                        if ($(this).val() === 'See Prior Filing')
                            $(this).val('');
                    })
                    $('#q68 input').removeAttr('readonly'); //table selector
                    $('#q69').show(); //table add button selector
                })
        })
    })
})

 

3 0

Replies

replied on December 13, 2013 Show version history

Daryl,

 

There's a somewhat tricky reason why the code isn't working. The identifiers for fields in tables are slightly different because the fields can appear more than once. Because ID attributes must be unique, a number is appended to the ID attribute for fields in tables. So, if you try to target them with #q64, it won't find the right element.

 

Generally it is easiest to target those fields by adding a class to them and then using that class in your selector. If you wanted to use the ID attribute as the selector, you'd grab the ID attribute for the column (e.g., #q8) and change your selector to mean "starts with Field8" like so: $('id^=[Field8]').

 

Since using classes as selectors is generally a better idea and you already added the "autofill" class to the appropriate fields, here's some code that will work for your second section (and third section with slight modifications). The code will fill in each table field with the autofill class, make the fields read-only, and remove the "Add" button so users can't add another row to the table.

 

$(document).ready(function () {


    $('#q282 input').change(function () { 
        $("#q282 input:checked").each(function () {  
            if ($(this).val() == "No") {
                $('#q61 tbody tr').each(function () {

                    $(this).find('.autofill input').each(function () {
                        $(this).val('See Prior Filing');
                    })
                })
                $('#q61 input').attr('readonly', 'true');

                $('#q62').hide();
            }
            else
                $('#q61 tbody tr').each(function () {

                    $(this).find('.autofill input').each(function () {
                        if ($(this).val() === 'See Prior Filing')
                            $(this).val('');
                    })
                    $('#q61 input').removeAttr('readonly');
                    $('#q62').show();
                })
        })
    })
})

The above code should work for your second section. For your third section, you'd just replace #q61 with #q68, #q282 with #q283, and #q62 with #q69.

 

Let me know if you have any questions!

1 0
replied on December 13, 2013

Eric,

Should I insert this code on a different sheet than the code for the first section, or can they all be on the same sheet?

0 0
replied on December 13, 2013

It can all be together.

0 0
replied on December 16, 2013

Eric,

I've pasted the above code into a separate sheet just to make sure it works with the 3rd section...and it's not working.  I've made all the necessary changes with the #q number...but when I get to that section...nothing happens in the the section when I choose (NO) to the Are you Ammending.  I've even put the code directly onto the Script Page in Forms.

0 0
replied on December 16, 2013

Does it work for the second section? If so, there might be a small error preventing the code from working on the third section (which is structurally very similar to the second section).

 

For the third section, make sure the option for that checkbox (although I'd probably switch these to radio buttons) is "No" without any extra spaces. That value has to match the value specified on line 5 of the following code.

 

Here's what the code for the third section should look like:

 

$(document).ready(function () {

    $('#q283 input').change(function () { 
        $("#q283 input:checked").each(function () { 
            if ($(this).val() == "No") {
                $('#q68 tbody tr').each(function () {

                    $(this).find('.autofill input').each(function () {
                        $(this).val('See Prior Filing');
                    })
                })
                $('#q68 input').attr('readonly', 'true');

                $('#q69').hide();
            }
            else
                $('#q68 tbody tr').each(function () {

                    $(this).find('.autofill input').each(function () {
                        if ($(this).val() === 'See Prior Filing')
                            $(this).val('');
                    })
                    $('#q68 input').removeAttr('readonly');
                    $('#q69').show();
                })
        })
    })
})

 

0 0
replied on December 13, 2013

As far as I have found, using lookup rules to fill fields in collections only works inside that collection itself.

 

Each repeatable section needs to have it's own lookup rules based on information within that section.

 

 

If you want to get around this, I recommend the use of Javascript to take information from one section and fill it into another. Refer to this link to get the help manual: http://www.laserfiche.com/support/webhelp/laserficheforms/9.0/en-us/forms/#GettingStartedWithJavaScript.htm%3FTocPath%3DCreating%20a%20Form%7CThe%20Form%20Designer%7CScript%7C_____3

0 0
replied on December 16, 2013

Eric,

I may have to scrap the form altogether because now I notice that if I fill out the first section and say I chose "No", then the second section I also fill out "No" then realize I made a mistake and go back to section one and change it from "No" to "Yes", then it wipes out what was in section 2 even though it's still showing "No" (which means it should still say "See Prior Filing".  Perhaps LF Forms is not robust enough to accomplish what the client had thought?

0 0
replied on December 16, 2013 Show version history

That sounds like a JavaScript issue, not an issue with Forms itself. If possible, could you attach all of the JavaScript you're using to this question? I'd like to take a closer look at the issues you're experiencing.

0 0
replied on December 17, 2013

Eric,

I found the issue...it was in the link to the external sheet...for whatever reason...this wasn't working:

var script = document.createElement('script'); 
script.src = "http://FormsServer/Forms/js/scriptname.js";
document.getElementsByTagName('head')[0].appendChild(script);

 

and I had to use the following:

$.getScript('http://FormsServer/Forms/js/scriptname.js');

 

 

One question I have though is the first section for the address field...is there a way for me to hide the add button there as well?

 

 

$(document).ready(function () { 

    // this section of code is for one radio button and the fields that should be affected by it 
    $('#q281 input').change(function () { 
        $("#q281 input:checked").each(function(){ 
        if ($(this).val() == "No") 
        { 
            $('#q306 input').val('See Prior Filing'); 
        } 
        else if ($('#q306 input').val() === 'See Prior Filing') 
            $('#q306 input').val('') 
    }) 
}) 
// end of section 

//for other radio button + field sections, just copy that section and paste it above the final '})' 

0 0
replied on December 17, 2013

Sure, you'd just adjust that code slightly:

 

    $('#q281 input').change(function () { 
        $("#q281 input:checked").each(function(){ 
            if ($(this).val() == "No") 
            { 
                $('#q306 input').val('See Prior Filing'); 
                $('#q304').hide(); //this hides the add button
            } 
            else if ($('#q306 input').val() === 'See Prior Filing') 
                $('#q306 input').val('') 
            $('#q304').show(); //this shows the add button
        }) 
    })

 

0 0
replied on December 17, 2013

So the customer has changed the form up to accomodate their flow more...so this poses some differences in the original form I created..so now they're going to have a question and if the answer is "No" they're going to hide the fields (the question is no longer a check box, but now a drop down), however, because the form can be an ammeded form to an original already submitted...they want the ability to have a user select "No" have the field hidden, however, they want the field popluated with "See Prior Filing"  (even thought it's hidden) when it get's submitted so that the public would know that they need to reference the original form when looking at the ammended form in Laserfiche.

0 0
replied on December 17, 2013 Show version history

When targeting a drop-down instead of a radio button, you'll change your selectors and simplify the code structure. From

$('#q281 input').change(function () {
    $("#q281 input:checked").each(function(){
        if ($(this).val() == "No")
        {
code goes here...
        } 
})
})

 

to

$('#q281 select').change(function () {
        if ($(this).val() == "No")
        {
code goes here...
        } 
})

 

 

Then, to simplify hiding all the field for a section, group them into sections that follow the drop-down field and then hide or show the section based on the drop-down's value. A field rule will work for this; no JavaScript required.

 

 

0 0
replied on December 17, 2013

Eric,
Thanks for the feedback...I think I might not have explained what I was asking in the last post very well.  I know you can hide fields with Rules...but is there a way for the data to still be poplulated in those fields and then displayed on the output form?  For example:  I answer "No" and hide Field A, however, I still want Field A to be popluated with "See Prior Filing" and shown on the Output form that will be in Laserfiche.  The reason we want it hidden on the Entry Form is we don't want people mistakenly trying to enter information that is not needed.  Is this still possible?  I tried it and any field I hide, doesn't get popluated and then is not shown on the final output form in Laserfiche.

0 0
replied on December 17, 2013 Show version history

It is possible to hide a section of fields ONLY on the starting form. Since this is a more complicated hide/show rule, you'll use JavaScript to accomplish it. Here's the code for your first section:

 

$('#q281 select').change(function () {

        if ($(this).val() == "No") {
            $('#q306 input').val('See Prior Filing');
            if ($('input[name="routingResumeId"]').val() == "") {
                $('#q304').hide(); 
            }
            
        }
        else if ($('#q306 input').val() === 'See Prior Filing')
            $('#q306 input').val('') 
        $('#q304').show(); 
    })

Here's the important part that checks to see if it is the starting form:

 

            if ($('input[name="routingResumeId"]').val() == "") { //checks to see if the form has a routing ID yet, the starting form won't have one yet.
                $('#q304').hide(); //hides the section with the filled fields.
            }

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.