Question

Dynamically Change Required Fields with Radio Buttons

Forms

Updated April 24, 2017

asked on April 21, 2017 • Show version history

UPDATE: A very big thank you to Matthew Tingey for his help with this problem. My hangup was that I was unclear on the need to add a '.req' class to the fields I want to be dynamically required. This article is where I found the code I ended up using, along with Matthew's additions. To clarify in case anyone else is similarly confused:

.req class: add this to all fields you want to be dynamically required
.checkbox class: add this to the field that will act as your toggle for requiring the other fields

Thanks for bearing with my mental density on this issue--I hope my struggles save others time in the future!

Hi all,

I read the top 5 threads that are returned when searching 'dynamically change required fields'. They were very helpful (especially this thread and also this one) but I just can't get the code to work with radio buttons. Another member ended the first thread asking how to make this work with radio buttons; they didn't receive a reply so I figured now might be a good time to re-ask. Any help or general JS tips will be greatly appreciated.

I copied the code contained in the first thread linked above and only made two changes, specifically the class name ('actionradio', which I added to the relevant field) and modifying the 'if' clause ('$(this[1])...'), hoping to target the first of two radio buttons within that field. Here's the code with my changes:

$(document).ready(function() { 
  $('.actionradio input').change(function () {
        if ($(this[1]).is(':checked')) {
            $('.req span.cf-required').remove();
            $('.req input').removeClass('required').removeAttr('required');
        } else {
            $('.req label').append('<span class="cf-required">*</span>');
            $('.req input').attr('required', 'True');
        }
    })
});

My best guess is that I am using the wrong syntax (ie, "if ($(this[1]).is(':checked')") to target the first radio button to verify whether it's checked, but it seems like it should work according to other threads I read; assuming I'm on the right path, I think I just need help figuring out what number to put in the square brackets.

Thank you!

Rob

1 0

Answer

SELECTED ANSWER

replied on April 24, 2017

The parsley classes shouldn't be impacting it. That's what highlights the fields in green or red when completed/missing.

Let's test to make sure your if statement is even executing as expected.

Within your if block, add something like this: alert('if');

Within your else block, add something like this: alert('else');

Then you should receive one of the two pop-up alerts, and we'll be certain which section of code is running.

If we can confirm that the if block is executing as expected, then we know we need to dig deeper into the code within the block.

Additionally - are you pre-setting these fields as Required from the layout page? If so, you probably don't want to do that. When you are using Javascript to impact things like required or read-only status, it can get messy when you have settings being tweaked on both the Layout page and the Javascript - so it's usually best to leave it unset from the layout page.

1 0

Replies

replied on April 22, 2017

Is there a reason you are not using an if statement like this?

if ($(this).val() == '1')

When you add the radio button to the Layout page you can chose to use just the labels (in which case val() returns the label of the selected item) or you can add separate values (in which case val() returns the selected item's value).

Also, you're missing a closing semi-colon ( ; ) on line 10.

1 0

replied on April 24, 2017 • Show version history

Good morning Matthew,

Indeed there is a reason--it's because I'm new to JavaScript /jQuery and am still trying to gain my bearings!

Also, I didn't understand the implication of assigning values to choices for fields in Forms, so thank you for explaining that connection for me.

I added the missing semi-colon to line 10--thanks for catching that!

Unfortunately, these changes don't seem to do the trick. I took a screenshot of the form and dev console and highlighted the radio button + the first single-line field that should not be required if the radio button "Update" is selected.

Would any of the "parsley-..." classes be impacting things? Also, I noticed that the Last Name input tag in the DOM contains the word "required" hanging out by itself, not as part of a "class=" or "name=" etc. What type of attribute/value is the word "required" in this context?

Thank you for helping my with this, I really appreciate it!

Cheers,

Rob

2017-04-24 07_28_51-Dynamically Change Required Fields with Radio Buttons - Laserfiche Answers.png (65.92 KB)

| Download

0 0

SELECTED ANSWER

replied on April 24, 2017

The parsley classes shouldn't be impacting it. That's what highlights the fields in green or red when completed/missing.

Let's test to make sure your if statement is even executing as expected.

Within your if block, add something like this: alert('if');

Within your else block, add something like this: alert('else');

Then you should receive one of the two pop-up alerts, and we'll be certain which section of code is running.

If we can confirm that the if block is executing as expected, then we know we need to dig deeper into the code within the block.

1 0

replied on April 24, 2017

Thanks for clarifying re: the parsley classes, and for the very useful suggestion to add alerts when debugging--I will definitely make use of this regularly moving forward. Thank you too for caveat re: toggling the 'Required' checkbox for fields on the Layout page when using JavaScript.

After including the alerts and unchecking all the 'Required' checkboxes, I was able to confirm that both the 'if' block and 'else' block are evaluating as expected--each alert triggers when the appropriate radio button is checked. Here's the code I was using (I changed the radio button being monitored, since in this case it makes more sense to set fields as not/required earlier than later):

$(document).ready(function() { 
  $('.clientradio input').change(function () {
    if ($(this).val() == 'existing') {
            $('.req span.cf-required').remove();
            $('.req input').removeClass('required').removeAttr('required');
          	alert('if');
    } else {
            $('.req label').append('<span class="cf-required">*</span>');
            $('.req input').attr('required', 'True');
          	alert('else');
    }
    });
});

However, when '$(this).val()' does not equal 'existing', none of the fields become required--in the Preview, I can click the 'Submit' button and the page reloads as though the form had been submitted.

I was thinking that the perhaps the '.req' class and 'required' attribute needed to be assigned to the fields in order for the script to work (ie, maybe the 'Required' checkboxes needed to be checked), but this did not seem to affect anything after I set a couple of fields to 'Required' in the Layout page.

Thanks again for the feedback and suggestions, I feel like we're one step closer to figuring this out!

0 0

replied on April 24, 2017

Glad to hear you got it working @████████!

1 0

You are not allowed to follow up in this post.

Question

Question

Dynamically Change Required Fields with Radio Buttons

Answer

Replies

Sign in to reply to this post.