How to give value to ‘select’ element through Javascript?

Hi @ragos

I hope you are doing well.

I am afraid it isn’t possible, the Forminator value created on the select field in the fly won’t be handled with the plugin unless the #select-3-field value does exist while you created the form in the WordPress dashboard, so you would need to select it using JS and also set the test using

jQuery('#select-3 .select2-selection__rendered').text(val);

That prints the “label” for the selected element.

To find more on how to select the option:
https://stackoverflow.com/a/10911660
https://stackoverflow.com/questions/4864620/how-to-use-jquery-to-select-a-dropdown-option

But if this value doesn’t exist in the select field when creating the form it won’t work.

However, it does work if you use a regular input field so you just set the input value based on Select field value.

If you have a small number of Select options another alternative is working with conditionals in your Field > conditionals.

The complete documentation is found at https://premium.wpmudev.org/docs/wpmu-dev-plugins/forminator/

Let us know if you have any additional question.
Best Regards
Patrick Freitas

Hi @ragos

You can listen to the event on change without any issue.

For example this code would work fine:

jQuery(document).ready(function() {

    jQuery("#select-2-field").change(function() {
        console.log('It works');
    });
});

But there are some tricks here, it need to load after Forminator in the HTML, so make sure it is loading on the footer, you can apply the code as a mu-plugin file following this guide: https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

The code should looks like:

<?php

add_action( 'wp_footer', function(){

  global $post;

  if( ! $post instanceof WP_Post || ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
      return;
  }

  ?>
  <script type="text/javascript">

      jQuery(document).ready(function() {

        jQuery("#select-2-field").change(function() {
            console.log('It works');
        });
        
    });

  </script>

  <?php
}, 999 );

But it only works if your form isn’t loading from Ajax:
https://monosnap.com/file/t39S78PKh6siUCacBTyf2FGxqsYpyA

In case you load from Ajax there is an event that you can trigger,

after.load.forminator

You can find a sample of usage in this link:
https://gist.github.com/patrickfreitasdev/a6943c0682334a5ec2d653981cbbccdb

Now, there are the limitations that I let you know on the first reply, you can only select options that do exist on your form when creating it:

https://monosnap.com/file/XECHZ16X12xt6tHwqtaAy1IrvF7nFI

It won’t work if you would like to create a new Select option in the fly, but if you add this Select 2 Val inside an input field would work without issue.

Best Regards
Patrick Freitas