Can't Select Field For Use With JavaScript Using .blur (LF Avante)

SELECTED ANSWER

replied on June 22, 2022

Hey! You're the 10,000th question flagged as Forms - they should give you a prize.

Both #q6 input and #Field6 should work. But your problem is likely that this Javascript is running before the form has fully loaded (and thus those ids don't actually exist yet). You need to wrap your code into a document ready function:

$(document).ready(function() {

  $('#Field6').blur(function() {
    console.log("value changed");
  });

  $('#q6 input').blur(function() {
    console.log("value changed");
  });

});

1 0

View 1 previous reply

replied on June 22, 2022 • Show version history

A little more background info. The document ready event is triggered when the form has fully loaded to the screen, so most of your custom Javascript is going to need to happen within that function in order to ensure the form has been loaded before your code runs. That isn't always the case, but it will be for a large amount of the code that you'll use within Forms.

Regarding the ids - each field in Forms (the classic designer) is actually a collection of parts - the label, text above and below the field, helptips, the field iteself, and various other parts. When you refer to the id "q6" you are referring to the entire field and all its parts, so to refer just to the input field within q6, you need to refer to "#q6 input". The input field itself has an id of "Field6" which is why you can refer to it directly as "#Field6". You can also refer to fields by their CSS Class names. You can add CSS Classes to the fields on the layout page. You can give them any class name you want, and they are reusable. Then you can refer to these classes in both CSS and Javascript. Classes are better than IDs for reusable code - either code you want to have work against more than one field, or code that you want to be able to copy to other forms with minimal tweaks. To refer to a CSS Class, you would use the . selector instead of the # selector. Example: $('.myField input').blur(function() { Note that with CSS Class names, you are referring to the top-level of that field, similar to using the #q0 id selector, so you need to include input afterwards (or textarea for multi-line fields or select for drop-down fields).

2 0

replied on June 22, 2022

Based on your explanation of what you are trying to do, something like this may be helpful:

I added a number field to a form and gave it CSS Class: myNumberField

I added a checkbox field to the form and gave it CSS Class: myCheckboxField
I added two fields to the checkbox with values of: Value_is_under_10 and Value_is_ten_or_greater

Then I added this Javascript to the form:

$(document).ready(function() {
  
  $('.myNumberField input').change(function() {
    var myNumber = parseInt($(this).val());
    if(myNumber < 10) {
      $('.myCheckboxField input[value=Value_is_under_10]').attr('checked', true);
      $('.myCheckboxField input[value=Value_is_ten_or_greater]').attr('checked', false);
    }
    else if (myNumber >= 10) {
      $('.myCheckboxField input[value=Value_is_under_10]').attr('checked', false);
      $('.myCheckboxField input[value=Value_is_ten_or_greater]').attr('checked', true);
    }
    else {
      $('.myCheckboxField input[value=Value_is_under_10]').attr('checked', false);
      $('.myCheckboxField input[value=Value_is_ten_or_greater]').attr('checked', false);
    }
  });
  
});

End result, based on the text in the myNumberField - if it is less than 10 it checks that checkbox - if it is 10 or more it checks that checkbox - and if it is blank, it unchecks both checkboxes.

3 0

replied on June 23, 2022

Thanks Matthew, super helpful stuff here! I'm familiar with JS, but only in more traditional settings, and the written docs don't quite illustrate how LF and JS fit together (I was wrongly assuming my code would already be in a doc ready).

I'm going to get more clarification on the end goals, but I'm thinking something similar to the code in your last post is the way to go.

1 0

replied on June 23, 2022

Super! Glad to help!

0 0

Question

Question

Can't Select Field For Use With JavaScript Using .blur (LF Avante)

Answer

Replies

Sign in to reply to this post.