When presented with two Autofill buttons, how can I set both to trigger without ruining my form?

asked on March 19, 2016

I currently have two Autofill buttons on my form, both of which I know how to trigger. It looks something like this, where I have classes "lookupCondition" and "lookupCondition2" on the respective fields that should trigger the clicking of Autofill.

$(document).ready(function () {
 
   function autofill() {
    $('.autofill').trigger('click');
  } 
  
  $('.lookupCondition').change(autofill);
    
});

$(document).ready(function () {
  
   function autofill2() {
    $('.autofill').trigger('click');
  } 
  
  $('.lookupCondition2').change(autofill2);
    
});

The problem when I do this is that it causes all other fields in my Form to resist input of any kind. They now blank out as I type.

The fields filled in that autofill2 requires to trigger, are filled in by the first autofill, which causes the second one to automatically click when the first lookup goes off.

I tried instead modifying my code like this, using the specific identifiers of the buttons themselves, but it only triggers the first autofill - however, my fields don't automatically blank out if I type in them.

$(document).ready(function () {

function autofill() {
$('#lookup224').trigger('click');
$('#lookup225').delay(2000).trigger('click');
}

$('.lookupCondition').change(autofill);

});

0 0

SELECTED ANSWER

replied on March 21, 2016

Your first bit of code should work if you replace the $('.autofill') with the IDs from your second block of code. What's happening in your original example is that the $('.autofill') selector actually targets BOTH buttons. Thus when the second rule triggers based on the change from the first, it creates an infinite loop of change events. Does your second lookup work properly if you remove all automation and just manually click it? Check into that if you continue to have problems.

1 0

View 1 previous reply

replied on April 19, 2017

Scot,

I'm a little lost. On my form, I have 5 autofill look-ups. I want them to trigger independently. I've tried to mimic above, but have been unsuccessful. If I manually click the buttons, they work. I have copied my code below. Any insight would be greatly appreciated.

$(document).ready(function () {
  
   function autofill() {
    $('.lc1.autofill').trigger('click');
  } 
  
  $('.lc1').change(autofill);
  
});

$(document).ready(function () {
  
   function autofill() {
    $('.lc2.autofill').trigger('click');
  } 
  
  $('.lc2').change(autofill);
  
});
$(document).ready(function () {
  
   function autofill() {
    $('.lc3.autofill').trigger('click');
  } 
  
  $('.lc3').change(autofill);
  
});
$(document).ready(function () {
  
   function autofill() {
    $('.lc4.autofill').trigger('click');
  } 
  
  $('.lc4').change(autofill);
  
});
$(document).ready(function () {
  
   function autofill() {
    $('.lc5.autofill').trigger('click');
  } 
  
  $('.lc5').change(autofill);
  
});

0 0

replied on April 19, 2017

It probably has to do with your selectors that you are trying to use to click on the autofill buttons. As far as I know, Laserfiche Forms automatically inserts the autofill button next to the last field listed as an input to your lookup rule, and it gives it the "autofill" css class. I don't know of any way to assign additional classes to that button out-of-the-box, so '.lc1.autofill' probably doesn't select anything. The best thing to do is to actually open a preview of your form with all the Autofill buttons visible (you can hide them later if you like). Then use the F12 developer tools from your browser to find the 'id' html attribute of each autofill button. Make a note of which ID maps to which of your CSS classes lc1, lc2, etc...

Then, the following code should work (and is a little more compact than what you have above):

$(document).ready(function(){
  $('.lc1').change(function(){
    $('#lookupXYZ1').click();
  });
  $('.lc2').change(function(){
    $('#lookupXYZ2').click();
  });
  $('.lc3').change(function(){
    $('#lookupXYZ3').click();
  });
  $('.lc4').change(function(){
    $('#lookupXYZ4').click();
  });
  $('.lc5').change(function(){
    $('#lookupXYZ5').click();
  });
});

Assuming you plug in all your IDs for the "#lookupXYZ" placeholders.

0 0

replied on April 20, 2017

Scott - Thanks a lot! This works really well for the autofills linked to a drop down. What modification can I make to have it work for a Single Line field?

0 0

replied on April 28, 2017

This same code should still work for a single line field. The CSS class gets attached to the list item element in Forms, which contains all the other elements for any type of field that you add to the page (same basic structure if it is a Dropdown, Single Line, Multi-line, etc...). The JavaScript attaches an event handler to this <li> element. Because events "bubble up" the HTML DOM in web browsers, the change event should trigger on the parent <li> element whenever you do something to one of its children, regardless of what type of field it is.

0 0

Question

Question

When presented with two Autofill buttons, how can I set both to trigger without ruining my form?

Answer

Replies

Sign in to reply to this post.