BugWP logo BugWP
Back to Community
Home / Community / Plugin → Ninja forms – the contact form builder that grows with you

How to Dynamically Update Form Field Values Before Submission in Ninja Forms

25 threads Sep 16, 2025 Plugin → Ninja forms – the contact form builder that grows with you

Content

Many Ninja Forms users need to manipulate form data just before it's submitted, such as combining separate date fields into a single hidden field. A common approach is to use custom JavaScript with Marionette and Backbone.Radio, which are the libraries that power the Ninja Forms front-end. However, users often find their code doesn't execute as expected, with console logs appearing in the initialization phase but not within the submit function itself.

Why This Happens

The issue typically stems from using the wrong Radio channel event. The Ninja Forms submission process involves several events, and hooking into the correct one is crucial for your code to run at the intended time. The maybe:submit event might not be the appropriate hook for altering field values before the final submission data is packaged and sent.

Common Solutions

1. Use the 'submit:before' Event

Based on community findings and developer documentation, a more reliable channel for altering values immediately before submission is often the submit:before event. This event is triggered after validation but before the data is sent to the server.

var mySubmitController = Marionette.Object.extend( {
  initialize: function() {
    // Listen for the 'submit:before' event on the 'forms' channel
    this.listenTo( Backbone.Radio.channel( 'forms' ), 'submit:before', this.beforeSubmit );
    console.log('init');
  },
  beforeSubmit: function( response ) {
    // Your logic to get and set field values
    let day = jQuery( '#nf-field-60' ).val();
    let month = jQuery( '#nf-field-61' ).val();
    let year = jQuery( '#nf-field-62' ).val();
    let dob = year +'-'+ month +'-'+ day;
    jQuery( '#nf-field-69' ).val(dob);
    console.log('Hidden field value set to: ' + dob);
  }
});

// Instantiate the controller
new mySubmitController();

2. Ensure Proper Field Targeting

Double-check that the field IDs (e.g., #nf-field-69) in your JavaScript are correct. These IDs can sometimes change when a form is updated or duplicated. Using the correct, current ID is essential for the script to find and manipulate the field.

3. Verify JavaScript Loading and Scope

Ensure your custom JavaScript code is being loaded on the page where the form is displayed. It should be enqueued properly in WordPress after the Ninja Forms scripts have been loaded to ensure the Marionette and Backbone objects are available.

Alternative Approach: PHP Filter

For some data manipulation tasks, especially those that don't require immediate user-facing feedback, using a PHP filter on the server-side can be more reliable. The ninja_forms_submit_data filter allows you to alter the submission data array before it is processed by actions (like sending an email or saving to the database).

add_filter( 'ninja_forms_submit_data', 'my_custom_submit_data_manipulation' );

function my_custom_submit_data_manipulation( $form_data ) {
    // Find your fields in the $form_data['fields'] array by their key or settings
    foreach( $form_data['fields'] as $key => $field ) {
        // Logic to find your specific fields and combine their values
        // Example: if ( 'dob_day' == $field['key'] ) { ... }
    }
    // Return the modified data array
    return $form_data;
}

By understanding the Ninja Forms JavaScript lifecycle and choosing the correct event or server-side filter, you can successfully update field values at the right moment in the submission process.

Related Support Threads Support