Forms - Dynamically populate check box options in the same fashion as a dynamic list

replied on March 10, 2015

The underlying HTML DOM structure is quite different for checkbox/radio groups compared to the drop-down list element. You can do all sorts of things with Javascript if you wanted. For instance, I created a demo page with a dropdown (q1) and a checkbox (q2). I configured a forms lookup rule to populate the dropdown with a list of options (this dropdown could be hidden with CSS if you wanted). Then I wrote the following code to synchronize the checkbox options to the options in the dropdown list:

$('#q1').on('change', function() {
   $('#q2 div > span').remove();
   $('#q1 option').each( function(ind) {
      if ($(this).text() != ""){
         chkopt = new $('<span class="choice"><input id="Field2-'+ind+'" type="checkbox" vo="e"></input><label class="form-option-label" for="Field2-'+ind+'">'+$(this).text()+'</label></span>');
         $('#q2 > div > div').append(chkopt);
      }
   });
});
setTimeout(function(){ $('#q1').trigger('change');}, 250);

Just know that the HTML I'm using to create the checkbox options may need to change if Forms ever gets updated. Also, I haven't found a good way to respond to a lookup rule that is just a simple "fill" condition running when the form loads. My workaround is usually to trigger a 'change' event on a slight delay after the form loads.

0 0

View 2 previous replies

replied on March 10, 2015

Thanks, I will give this a try. I have the same problem combining java script with lookups. The javascript on change event does not work as intended. If a lookup task changes a field it disregards it and waits for a manual change.

0 0

replied on July 11, 2017

Can you expand on this a bit more. I have created the form that you described and have copied that code. I have made certain that each field was the correct q1 and q2 and made one a dropdown and the other a checkbox.

It doesn't seem to work for me no matter what I change. Any help would be great.

John

0 0

replied on July 13, 2017

Looking back at this post 2 years later, this probably isn't a good approach to take for a couple of reasons:

The JavaScript is so hard coded to a specific structure of HTML elements, and it will only work as long as Forms hasn't changed that structure at all. In reality the Forms developers may have decided to rearrange things a bit, which would be why I imagine the code no longer works (this was written on Forms 9.2 I would think). It is best to avoid these kinds of "fragile" solutions.
I probably didn't think to test this at the time (I was just getting started with Forms/JS), but I'll bet this code doesn't work properly when you save the form to Laserfiche or preview a previously submitted form. The lookup rules don't trigger during these processes, so I would think your checkboxes would be incorrect/missing in these situations.

The better answer would be to make a table or collection that is linked to a lookup rule, and then your users can use the add/remove buttons on the table to select multiple values. That's how I do this sort of thing on all my current forms.

0 0

replied on July 17, 2017

For now, I've been returning the lookup values to an input field and then using javascript to popuate the checkbox or radio based on the .val(). It works but seems like a lot of unnecessary code, especially when a form has lots of radio buttons.

0 0

replied on July 17, 2017

...and there's this approach, too:
http://answers.laserfiche.com/questions/62745/How-to-populate-Checkbox-from-a-database#65084

0 0

Question

Question

Forms - Dynamically populate check box options in the same fashion as a dynamic list

Replies

Sign in to reply to this post.