If have a page where you can select a specific broker from a list. The broker name has to be filled in into the hidden field in Ninja Forms.

if(jQuery('#broker-list').length) { //checks if the list exists
    jQuery(document).on( 'nfFormReady', function( e, layoutView ) {
        var broker_name = "";

        jQuery(document).on("click", ".broker" , function() {
            broker_name = jQuery('.broker__name', this).text();

            console.log(broker_name); // this works perfectly

            if(jQuery('#nf-field-33').length) {
                jQuery(this).val(broker_name); //value of field is still empty
            }
            if(jQuery('#nf-field-34').length) {
                jQuery(this).val(broker_name); //value of field is still empty
            }
        });
    });
}

I always thought that you have to wrap is with jQuery(document).on( 'nfFormReady', function( e, layoutView ) { }); in order to prefill fields in Ninja Forms with jQuery. But that doesn't seems to work in this case. What wrong over here?

I know there are PHP possibilities to fill in data in a field, but that isn't an option this case.

It works perfectly when I copy/paste the code above in console.

If have a page where you can select a specific broker from a list. The broker name has to be filled in into the hidden field in Ninja Forms.

if(jQuery('#broker-list').length) { //checks if the list exists
    jQuery(document).on( 'nfFormReady', function( e, layoutView ) {
        var broker_name = "";

        jQuery(document).on("click", ".broker" , function() {
            broker_name = jQuery('.broker__name', this).text();

            console.log(broker_name); // this works perfectly

            if(jQuery('#nf-field-33').length) {
                jQuery(this).val(broker_name); //value of field is still empty
            }
            if(jQuery('#nf-field-34').length) {
                jQuery(this).val(broker_name); //value of field is still empty
            }
        });
    });
}

I always thought that you have to wrap is with jQuery(document).on( 'nfFormReady', function( e, layoutView ) { }); in order to prefill fields in Ninja Forms with jQuery. But that doesn't seems to work in this case. What wrong over here?

I know there are PHP possibilities to fill in data in a field, but that isn't an option this case.

It works perfectly when I copy/paste the code above in console.

• jquery
• forms
• plugin-ninja-forms

• I'd try moving the outermost check into the nfFormReady handler, i.e. don't check #broker-list until everything is ready. Or wrap the whole thing in a jQuery(document).ready(...). – Rup Commented Jan 15, 2020 at 13:55
• were you able to solve this? – Al Rosado Commented Apr 29, 2020 at 15:58

1 Answer 1

According to https://developer.ninjaforms/codex/changing-field-values/ you need to add .trigger( 'change' ) when changing Ninfa Forms field values programmatically.

This should work:

if(jQuery('#broker-list').length) { //checks if the list exists
    jQuery(document).on( 'nfFormReady', function( e, layoutView ) {
        var broker_name = "";

        jQuery(document).on("click", ".broker" , function() {
            broker_name = jQuery('.broker__name', this).text();

            console.log(broker_name); // this works perfectly

            if(jQuery('#nf-field-33').length) {
                jQuery(this).val(broker_name).trigger( 'change' );
            }
            if(jQuery('#nf-field-34').length) {
                jQuery(this).val(broker_name).trigger( 'change' );
            }
        });
    });
}