https://github.com/timoanttila/ninja-forms-input-onchange
How to use eventListener with Ninja Forms
https://github.com/timoanttila/ninja-forms-input-onchange
ninjaforms ninjaforms-addon ninjaforms-com wordpress wordpress-development
Last synced: about 1 month ago
JSON representation
How to use eventListener with Ninja Forms
- Host: GitHub
- URL: https://github.com/timoanttila/ninja-forms-input-onchange
- Owner: timoanttila
- Created: 2022-05-17T09:13:36.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-17T10:00:49.000Z (about 4 years ago)
- Last Synced: 2025-01-20T09:47:16.087Z (over 1 year ago)
- Topics: ninjaforms, ninjaforms-addon, ninjaforms-com, wordpress, wordpress-development
- Language: PHP
- Homepage:
- Size: 5.86 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# How to add eventListener to input field in Ninja Forms
WordPress loads a lot of scripts and not everything is ready when a custom script should run. The task was to get the hidden field filled in from the information in the visible fields. Normal eventLister did not work with JavaScript or JQuery.
```HTML
jQuery(document).on( 'nfFormReady', function() {
jQuery(".nf-form-content input[type=text]").on('change', function(){
const address = jQuery('#nf-field-17').val();
const zip = jQuery('#nf-field-48').val();
const city = jQuery('#nf-field-46').val();
const newValue = address +' '+ zip +' '+ city;
jQuery('#nf-field-56').val(newValue);
});
});
#nf-form-3-cont #nf-field-56-container { display: none }
```
The field's name can also be used instead of the Ninja Form's id.
```JQuery
jQuery('input[name=address]').val();
```