Forum Discussion

RyanPflederer2's avatar
RyanPflederer2
Qrew Trainee
7 years ago

Using JavaScript Add Onblur to Form Element

Dan Diebolt, this one's for you (or anyone else that can answer!).

Using IOL in a form, I want to add an EventListener for onblur on a rich text field. I've been trying to get it to work, but it keeps firing as soon as the page is loaded.

How could I do this?
App builders
Forms
Wizards and add-ons
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    7 years ago

    When you enter text into a Rich Text Field with fid=6 you are not directly entering text into the <textarea id=_fid_6 name=_fid_6></textarea>. Rather you are entering text into the <div> following the <textarea>. This <div> is content editable and the text you enter is only associated to the <textarea> form element when the form is submitted. So to detect when the <div> is blurred you have to use code similar to this:
    $("#_fid_6 + div").on("blur", function() {
      console.log(this.innerHTML)
    });
    Notes:

    (1) It may seem unusual but it is common for Rich Text Editors (QuickBase uses ACE) to have text entered into an element different from the form element that will get submitted with the form submits.

    (2) The selector "#_fid_6 + div" uses the "+" sign as the adjacent sibling selector.