Question

How to Validate a Number Range Based on a Radio Button Selection

Forms Version 10 How To

Updated September 20, 2017

asked on September 18, 2017

I'm creating a New Hire Set Up Form that includes a radio button field, Employment Status, with three choices: Full Time, Part Time, and Intern. If Full Time choice is selected, the Hours Per Week field must be at least 30, but not greater than 40. If either the Part Time or the Intern choice is selected, the Hours Per Week field must be between 1 and 29.

Can this be accomplished with javascript? Or, is there is a better way to validate the Hours Per Week field? If not, a sample script would greatly be appreciated. Thanks!

Validating Hours Per Week Based on Radio Button Selection.png (43.61 KB)

| Download

1 0

Answer

SELECTED ANSWER

replied on September 19, 2017

Hi John,

To change the pay type option, you could add CSS class payType to the pay type field and add the following script in the "else" path of above script:

      $('.payType select').val('Hourly');
      $('.payType select').trigger('change');

Besides, if you would like the dropdown field to be disabled when status is part time/intern, you could use script like this:

      $('.payType select').attr('disabled', true);

Also add script to change disabled status to false if status is full time.

1 0

replied on September 20, 2017

Rui, works great! Here's the complete script, as recommended, and printscreens of the Employment Status and Pay Type field selections.

Thanks for all your assistance!

Employment Status Script for Status Selection and Pay Type Fields.png

Employment Status-Full Time (Hourly).png

Employment Status-Full Time (Salary).png

Employment Status-Part Time or Intern (Hourly Only).png

Employment Status Script for Status Selection and Pay Type Fields.png (37.13 KB)

| Download

Employment Status-Full Time (Hourly).png (11 KB)

| Download

Employment Status-Full Time (Salary).png (11.17 KB)

| Download

Employment Status-Part Time or Intern (Hourly Only).png (10.87 KB)

| Download

0 0

replied on September 20, 2017

John and Rui, thanks for sharing this particular example. I have another use case where I can use similar scripting, so this was great!

0 0

Replies

replied on September 18, 2017

Hi John,

It can be done with javascript like this (add CSS class employmentStatus to Employment Status field, and add CSS class hoursPerWeek to Hours Per Week field):

$(document).ready(function(){
  $('.employmentStatus input').click(function(){
    if ($(this).is(':checked') && $(this).val() == 'Full Time') {
      $('.hoursPerWeek input').attr('min', 30);
      $('.hoursPerWeek input').attr('max', 40);
      $('.hoursPerWeek input').trigger('change');
    }
    else {
      $('.hoursPerWeek input').attr('min', 1);
      $('.hoursPerWeek input').attr('max', 29);
      $('.hoursPerWeek input').trigger('change');
    }
  })
})

0 0

replied on September 19, 2017

Thanks, Rui. You're the best!

0 0

replied on September 19, 2017

Rui, to continue to build on this scenario, a Salary Pay Type is available only for Full Time Employment Status. As you can see from the image below, when the Salary Pay Type is selected, the Hours Per Week and the Hourly Pay Rate fields are hidden using Field Rules and a Salary Pay Rate is shown.

If the Part Time or the Intern Employment Status radio button is selected, is there additional script that would automatically change the Pay Type drop-down choice to Hourly? (which the Field Rules will then show the Hours Per Week and the Hourly Pay Rate fields and hide the Salary Pay Rate field)

As always, Rui, your expertise is greatly appreciated!

Salary Pay Type Choice Available for Full Time Status.png

Part Time and Intern Employment Status must have Hourly Pay Type.png

Question

Question

How to Validate a Number Range Based on a Radio Button Selection

Answer

Replies

Sign in to reply to this post.