Question

JavaScript / jQuery selectors don't work on Forms Tasks?

Forms Web Customizations

Updated October 23, 2019

asked on October 18, 2019

I have a JavaScript script which is meant to hide a submit button on a form. It works when I look at the form preview. This form only appears as a user task in the forms process, and in this it doesn't work. As a test, I added an alert to the JS and that follows through, and the JS is in the page source so I know it's there. That prompted me to do some more testing to alter my script, since the element might be mutated. This is where it gets weird.

I'm in the dev console and I see the element is an input element, with a Submit class. So in jQuery I try to target $('input.Submit') and it can't find it. I tried a dozen different things and none of them could find the element. In vanilla JavaScript I tried document.querySelector('input.Submit'), I tried document.getElementsByClassName('.Submit'), etc. and nothing could find it.

Even when I just did $('input') it returned a jQuery object with 9 elements, but not the input.Submit object. We tried to select its parent wrapper with both jQuery and JavaScript and couldn't target it. We desperately tried to target just a .form-q and were not able to.

What's going on?

HTML.PNG (68.79 KB)

| Download

html2.PNG (94.21 KB)

| Download

Selectors.PNG (70.33 KB)

| Download

0 0

Replies

replied on October 18, 2019

Are you talking about a button you added through a custom HTML object or the actual Submit/Approve/Reject buttons that LFForms adds to your forms?

If you are talking about the system-generated buttons, I usually access it via their class names.

$('.Submit').hide();
$('.Approve').hide();
$('.Reject').hide();

1 0

replied on October 18, 2019 • Show version history

We tried those and could even see that the button had a class of .Submit in the dev console HTML but couldn't select it with any of its classes, an ID that we attached to it for testing and tried to select it with $('#testtest') and even that wouldn't take it. You can see in the screenshots that we are in the console, trying to select elements which absolutely exist in the DOM with the correct syntax, and being unable to select them.

0 0

replied on October 20, 2019

Make sure that the stuff is loaded into the DOM first.

$(document).ready(function(){
   $('.Submit').hide();
});

If not, you could be trying to hide the submit button before it is ready.

2 0

replied on October 18, 2019

Hi Brian

You shouldn't need to target the Submit Button using an Input, but more like in the example that Matt is showing can show or hide the Action Buttons.

Maybe drop your entire JS code here and some of the coders will have a look and may identify your issue

1 0

replied on October 18, 2019 • Show version history

Hi Steve,

I used the exact code that Matt posted and it won't target the submit button. Please see the screenshots were we try to target an element with class form-q and are unable to, even though in another screenshot there is an element with class .form-q visible.

This happened with several elements and dozens of different selectors. Our web developer came over and took a look and he couldn't figure it out either. JS or jQuery is behaving in a very unexpected way on this form, even when we try to test it directly in the console.

0 0

replied on October 18, 2019

LFForms uses standard Javascript and JQuery, but the structure can sometimes be different than you would expect, so things sometimes don't behave as you would expect, especially until you get used to working with those differences.

@████████ - are you willing to share your actual code? That would help in determining why it is not acting as expected.

0 0

replied on October 18, 2019

Matthew - Yes, I'll reconnect with the customer on Monday and get the code / more screengrabs of the odd behavior. Thanks for all your replies.

2 0

replied on October 22, 2019

All, thanks for your help on this. My script is below:

$('document').ready(function() {

  const DoCField = $('#Field52');
  const submitButton = $('.Submit');
  
  submitButton.hide();
  
  DoCField.on('change', () => {
    if (DoCField.val()) {
      submitButton.show();
    }
  });
});

In SubmitHidden.PNG you can see that this code works to hide the submit button in the preview.

Somehow now the button is gone on the forms task despite not changing the code or selectors. I'm still not able to select the button from the console and I'm very curious why. Please see FormsTaskComposite.PNG to see that I can't select the button with a variety of jQuery and JavaScript ES6 selectors.

The HTML for the submit button is:

<input 
  type="submit" 
  name="action" 
  value="Submit" 
  style="display: inline-block;" 
  id="submit-button-test" 
  class="action-btn ellipsis Submit">

SubmitHidden.PNG (70.71 KB)

| Download

FormsTaskComposite.png (148.22 KB)

| Download

0 0

replied on October 22, 2019 • Show version history

Looks like you are using $('document'), can you change that to $(document) without the apostrophes (')?

0 0

replied on October 23, 2019

Yes, we will definitely make that change. Still curious why I can't manually select items with either vanilla JS or jQuery in the console after the page is loaded though. Do the rest of my selectors in the console look correct to you?

0 0

You are not allowed to follow up in this post.

Question

Question

JavaScript / jQuery selectors don't work on Forms Tasks?

Replies

Sign in to reply to this post.