Embed javascript function within another javascript function

Question

I have a form with a conditional field that is only shown if the user selects a radio button for "other." If I remove the conditional on this field, my original javascript function works; however, with the conditional I can not get it to fire correctly.

The form has an event "cf.add" that fires when a conditional field is made visible, and using this jquery I get a correct response in the console:

jQuery( document ).on( 'cf.add', function(){
    console.log('cf.add triggered' );
});

And if I remove the conditional so that this field is rendered when the page is rendered, I get the correct response in this field, which is to add a '$':

$("#fld_3169487_4").on("blur", handleChange);
function handleChange() {
    var myValue = document.getElementById("fld_3169487_4").value;
 if (myValue.indexOf("$") != 0)
 {
  myValue = "$" + myValue;
 }
 document.getElementById("fld_3169487_4").value = myValue;
}

I've tried putting this second function within the first, but no luck. I feel like I'm adding them in the incorrect order when I try to combine the two, I'm not sure what I'm doing wrong though.

I've also tried to call the function handleChange() on the 'cf.add' trigger, but that did not work for me either.

When you say "made visible", what exactly are you doing for that? Are you adding a field dynamically to the page? Also, don't use the `blur` event, use `change` or `input`. — Brad, Sep 13 '18 at 19:27
Nesting functions, which is what you seem to be describing, is perfectly valid in JavaScript (and is in fact very common). Your issue seems to be something else. — nmg49, Sep 13 '18 at 19:35
https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — epascarello, Sep 13 '18 at 19:39
@brad yes, the field is being added by JS, sorry I wasn't more clear on that originally. Thanks for the heads up about change or input, I'll look into those. — Lavert, Sep 13 '18 at 23:38
@Lavert You need to bind an event on the parent element. The problem is that you can't add an event listener to something that doesn't exist. — Brad, Sep 13 '18 at 23:43
@brad yes, that is what's giving me issues. If the field renders with the rest of the page, meaning it's not shown/hidden conditionally based on selection, then it works just fine. — Lavert, Sep 14 '18 at 00:17

score 0 · Answer 1 · answered Sep 14 '18 at 21:27

After some playing around, I figured it out:

jQuery( document ).on( 'cf.add', function(){
var otherField = $("#fld_3169487_3");
otherField.focus();
var dollarValue;

$(otherField).on("blur", function() {
    dollarValue = otherField.val();
    if (dollarValue.indexOf("$") != 0) {
        dollarValue = "$ " + dollarValue;
    }
    $(otherField).val(dollarValue);
});

});

score -1 · Answer 2 · answered Sep 13 '18 at 19:35

Since cf.add is an custom even that is published by your form, you can have other elements subscribe to the event:

$("#fld_3169487_4").on('cf.add', function(event){
    if ($(this).val().indexOf("$") != 0)
    {
        $(this).val("$" +  $(this).val());
    }
});

Using $(this), we can target just the field the event is attached to. Additionally, data from the event publisher can be passed to the subscribers via the event argument.

Embed javascript function within another javascript function

2 Answers2