Changing dropdown selected value based on the datepicker selected date

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to use JavaScript to change the value of a select field based on the value selected in a datepicker.

Solution: There is no JavaScript API specifically for Toolset Forms, but we integrate the jQuery UI datepicker library so you can use their onSelect API: @http://api.jqueryui.com/datepicker/#option-onSelect

This support ticket is created 6 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Content-submission forms, Toolset Forms

This topic contains 1 reply, has 2 voices.

Last updated by Christian Cox 6 years, 4 months ago.

Assisted by: Christian Cox.

Author

Posts

July 11, 2018 at 1:01 pm #923534

nabils

Hi,

I am preparing a form which have date of birth as a datepicker. If the end user selects a date, I need to write a condition to change the level if the dates fall between let's say 12/05/2014 to 11/05/2016. How to write it. Should I do this with hooks or JQuery? I prefer to go with JQuery.

Link to site: hidden link

Thanks

July 11, 2018 at 6:51 pm #923727

Christian Cox

Hi, there's no JavaScript API for specifically for Toolset Forms, but we integrate the jQuery UI datepicker so you can use any datepicker methods from their documentation. For example, the onSelect method can be used to trigger other custom JavaScript: http://api.jqueryui.com/datepicker/#option-onSelect

In the Forms editor, there is a custom JS panel just beneath the Form editor. You can add any custom JavaScript here or you can enqueue it in a separate file. Be sure to wrap your code in a jQuery(document).ready handler, and use the jQuery namespace instead of $ for compatibility reasons. If you need to target a specific field, you can use the name attribute selector like this:

var $field = jQuery('input[name="wpcf-field"]');