Remove/hide options from select field based on date

Hi @jpnl,

I hope this message finds you well.

Would it be possible for you to share an export of the form using Google Drive or Pastebin.com so that we can take a closer look and help you further?

https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export

We look forward to hearing back from you.

Kind Regards,
Nebu John

Thanks @wpmudevsupport14,

Sure, here it is: https://pastebin.com/22UXbwWu

Thanks
JP

Hi @jpnl,

Hope this message finds you well, and thanks for sharing your form.

This is not currently possible without custom code, probably jQuery, in such a case, I notified our Second Line Support for a second look, and they will confirm if might be possible to provide a workaround. Since the work on very complex issues, getting a reply from them could take more time than usual, we will back to this topic once we get an update from them.

Best regards,
Laura

Thanks. I think jQuery is going to be a challenge, because the drop down entries are plain text.

Could you also add this as a feature request? So for each dropdown item to have a date condition to only show before/after a date?

Thanks
JP

Hi @jpnl

Thanks for response!

As of the jQuery workaround – our Second Line SUpport is looking into it. I’m not sure if they would actually use jQuery or PHP for that or a mix of both but they are checking it and if they can provide relatively simple solution for that, we’ll let you know about it. Though I’d appreciate some patience.

As for that being a feature: I have already suggested it to Forminator Team. Please note that at this point I’m not able to confirm if it will be added to the plugin and if yes – when. But I can confirm that it’s now an official feature request so it will be looked into and hopefully we’ll be able to implement it with one of future releases.

Best regards,
Adam

Hi @jpnl,

Could you please check and see whether the following snippet helps with resolving the issues noticed?

<?php

add_action( 'wp_footer', 'wpmudev_date_select_visibility', 9999 );
function wpmudev_date_select_visibility() {
	global $post;
	if ( is_a( $post, 'WP_Post' ) && ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
		return;
	}
	?>
	<script type="text/javascript">
	jQuery(document).ready(function($){
		setTimeout(function() {
			$('.forminator-custom-form').trigger('after.load.forminator');
		},500);
		
		$(document).on('after.load.forminator', function( e, form_id ) {
			if ( 'forminator-module-46096' === e.target.id ) { // Please change the form ID.
				const opt_limit = {};
				opt_limit['NLP Practitioner (start 13-09-2024)'] = '13-09-2024'; //option:date
				opt_limit['Info session 30 juli 2024'] = '30-07-2024';
				opt_limit['Info session 6 augustus 2024'] = '06-08-2024';
				
				$.each(opt_limit, function (key, value) {
					var now = new Date();
					value = new Date(value.replace( /(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"))
					if (value < now) {
						$('#select-1 option[value="'+key+'"]').remove();
					}
				});
			}
		});
	});
	</script>
	<?php
}

You can implement the above code using mu-plugins. Please check this link on how to implement the above code as a mu-plugins:
https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

Please do note to update the line 46096 in the given snippet with your form ID and let us know whether it works fine.

Looking forward to your response.

Kind Regards,

Nithin

Thank you for your help and this code Nithin!

The code does work, but unfortunately it is not something I can use as is. Two challenges

1. The code is limited to the specified form id. I have multiple forms for a different type of meetings, workshops etc. And each form has a drop down for different dates. I would need a generic code that works on all forms.
2. The dates are hardcoded in a plugin file, which makes it difficult to maintain when dates are added and/or removed. It would be ideal if it was generic code where the date could be taken from the option slug.

Thank you!
JP

Hi @jpnl

Thank you for response!

The reason for that is due to how these options were set in the originally shared form. But I asked our developers and if you will use only the date alone in select field option values (values, not labels) just like on the screenshot in your reply above – it will be possible to make code work with it.

They are looking into it and we’ll share new version with your soon – more generic so it will take date from option value and should be able to work with multiple forms.

Keep an eye on this space, please, for upcoming update.

Best regards,
Adam

Awesome, thanks

Hi @jpnl,

Could you please try this new snippet and see how it goes?

<?php

add_action( 'wp_footer', 'wpmudev_date_select_visibility', 9999 );
function wpmudev_date_select_visibility() {
	global $post;
	if ( is_a( $post, 'WP_Post' ) && ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
		return;
	}
	?>
	<script type="text/javascript">
	jQuery(document).ready(function($){
		setTimeout(function() {
			$('.forminator-custom-form').trigger('after.load.forminator');
		},500);
		
		$(document).on('after.load.forminator', function( e, form_id ) {
            var form_ids = [ 'forminator-module-2000', 'forminator-module-2960' ]; // Please add your form IDs.
			if ( form_ids.includes( e.target.id ) ) {
				$('#select-1 option').each(function(){ // Please change the select field IDs.
                    var value = $(this).val();
                    var now = new Date();
					value = new Date(value.replace( /(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"))
					if (value < now) {
						$(this).remove();
					}
                });
			}
		});
	});
	</script>
	<?php
}

In the above snippet for the form_ids we can add multiple form IDs and select-1 should be changed to the desired select field’s ID in your form.

Could you please check and see how that goes. You can implement the code via the mu-plugins as suggested before.

Kind Regards,

Nithin

Thank you so much, yes that works!

I made a slight modification though. This line didn’t work as I expected. I would expect that it removes if the value date is smaller than the current date. But it did hide it even if the date was the same. Maybe because ‘now’ includes the time while ‘value’ does not?

if (value < now) {

I changed it like this. No idea if it’s the best way, but it works.

if (value < (now + 1 ) {

2 more questions

1. Is it possible to make this work on all forms without specifying the form_ids? Otherwise the code needs to be modified every time a new form is added, which is something easy to forget.
2. What to do if one of the forms has an option field with a field ID different from select-1? Would it be possible to do this for all option fields? Or, if that’s too tricky, use another qualifier? Maybe the CSS class that can be assigned to the field, such as ‘option-value-date’?

Thanks!
JP

Hi @jpnl,

Glad to hear the code does work.

Is it possible to make this work on all forms without specifying the form_ids? Otherwise, the code needs to be modified every time a new form is added, which is something easy to forget.

Yes, I modified the code but is not recommended unless all your forms have/require the same functionality:

<?php

add_action( 'wp_footer', 'wpmudev_date_select_visibility', 9999 );
function wpmudev_date_select_visibility() {
	global $post;
	if ( is_a( $post, 'WP_Post' ) && ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
		return;
	}
	?>
	<script type="text/javascript">
	jQuery(document).ready(function($){
		setTimeout(function() {
			$('.forminator-custom-form').trigger('after.load.forminator');
		},500);
		
		$(document).on('after.load.forminator', function( e, form_id ) {
            var form_ids = [ 'forminator-module-2000', 'forminator-module-2960' ]; // Please add your form IDs.
			if ( form_ids.includes( e.target.id ) ) {
				$('#select-1 option').each(function(){ // Please change the select field IDs.
                    var value = $(this).val();
                    var now = new Date();
					value = new Date(value.replace( /(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"))
					if (value < now) {
						$(this).remove();
					}
                });
			}
		});
	});
	</script>
	<?php
}

What to do if one of the forms has an option field with a field ID different from select-1? Would it be possible to do this for all option fields? Or, if that’s too tricky, use another qualifier? Maybe the CSS class that can be assigned to the field, such as ‘option-value-date’?

This code has been created for the Select field only, any other field will require a new custom code, and creating a new code for all of them is out of our support scope. Using CSS is not possible either since field structures are different.

Let us know the results with the code I shared.

Best regards,
Laura

Hi and thanks,

The code you shared here is the same as the previous one (asking for form IDs and field IDs.

All forms on the site have the same functionality.

I understand it’s for the select field only. I am not looking for this to work on other field types. I wanted to get rid of the hard coded field ID for situations where the drop down in question has a different ID because there are more select fields in the form. If it would use a Class, then I can give that class to the select field that holds the dates. It would also prevents the code to run on forms that don’t need this (if the code doesn’t use form id’s).

Thanks
JP

Hi @jpnl,

The code you shared here is the same as the previous one (asking for form IDs and field IDs.

Please check the following and see how that goes:

<?php

add_action( 'wp_footer', 'wpmudev_date_select_visibility', 9999 );
function wpmudev_date_select_visibility() {
    global $post;
    if ( is_a( $post, 'WP_Post' ) && ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
        return;
    }
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        setTimeout(function() {
            $('.forminator-custom-form').trigger('after.load.forminator');
        },500);
        
        $(document).on('after.load.forminator', function( e ) {

            $('#select-1 option').each(function(){
                var value = $(this).val();
                var now = new Date();

                value = new Date(value.replace( /(\d{2})-((\d{2})-(\d{4})/, "$2/$1/$3"));

		if (value < (now + 1 ) {
                    $(this).remove();
                }
            });
        });
    });
    </script>
    <?php
}

I understand it’s for the select field only. I am not looking for this to work on other field types. I wanted to get rid of the hard coded field ID for situations where the drop down in question has a different ID because there are more select fields in the form. If it would use a Class, then I can give that class to the select field that holds the dates. It would also prevents the code to run on forms that don’t need this (if the code doesn’t use form id’s).

You can add custom class name to the select field as follows:

View post on imgur.com

Once done, you can update the following line from:
$('#select-1 option').each(function(){

To:
$('.myselect option').each(function(){

Please check and see whether that helps.

Kind Regards,

Nithin

Awesome, I got it working!

At first it didn’t work, so I called in the help of ChatGPT because I didn’t want to bother you again.

• There was an issue with the ‘value.replace’ having an extra opening parenthesis in the second part ((\d{2}), so it removed it.
• It also said the +1 which I added earlier doesn’t work for date objects, so it removed it.
• After that the current date was hidden again. To fix that it added this to set the time part of the date to midnight (00:00:00.000).
  now.setHours(0, 0, 0, 0);
  value.setHours(0, 0, 0, 0);

I am super happy with your help. Thank you very much!

JP