JavaScript for disable submit, then enable and make a field required

asked on July 16, 2020 • Show version history

I'm having trouble with this one. Could we combine two requirements in JavaScript?

1) Disable Submit until "Yes, Approved" is checked off on a checkbox field.

2) If "No, Send Back to Assistant" is checked off instead, then make the Comment box REQUIRED.

The checkbox has CSS Class of ckboxRequired
The Comment box has CSS Class of ckboxifRequired

And here is what I was playing with but is not working (there is no other JavaScript on the page) which I found pieces of on other Answers posts:

$(document).ready(function() {
$('.Submit').attr("disabled", "disabled");
});

//This is for the 2nd Approver Comments box to become Required
$(document).ready(function () {
$('.ckboxifRequired input').on('change', 'input',function () {
if ($(this).is('No, Send Back to Assistant':checked)) {
$('.ckboxRequired label').append('<span class="cf-required">*</span>');
$('.ckboxRequired textarea').attr('required', 'True');
//alert('if');

} else {
$('.ckboxRequired span.cf-required').remove();
$('.ckboxRequired textarea').removeClass('required').removeAttr('required');
}
});
});

0 0

replied on July 17, 2020

Hi Connie,

You can use this script. It's working for me

$(document).ready(function() {
  
  	//Disabled Submit
    $('.Submit').attr("disabled", "disabled");
  
  	//Checkbox change
  	$('.ckboxifRequired').change(function()
		{
    		//Check if the checkbox is checked
          	var value = document.getElementById("Field1-0").checked ;
          	
          	if(value === true)
            	{
              		//Your function 1 here if is checked
                  
                  	//Enabled Submit
                  	$('.Submit').attr("disabled", false);
            	}
          	else
            	{
              		//Your function 2 here if is not checked
                  
                  	//Disabled Submit
    				$('.Submit').attr("disabled", "disabled");
            	}
    	});
  	
});

0 0

View 7 previous replies

replied on July 17, 2020

Thanks, Olivier! It's not working however, I think it's because I just realized my field is not a checkbox, it's a radio button field. What would need to change if that was the case?

0 0

replied on July 17, 2020

Connie

$(document).ready(function() {
  
  	//Disabled Submit
    $('.Submit').attr("disabled", "disabled");
  
  	//Checkbox change
  	$('.buttonradioifRequired').change(function()
		{
    		//Check if the checkbox is checked
          	var value = $('.buttonradioifRequired input:checked').val() ;
          
          	if(value == "val1")
            	{
              		//Your function 1 here if is checked
                  
                  	//Enabled Submit
                  	$('.Submit').attr("disabled", false);
            	}
          	else
            	{
              		//Your function 2 here if is not checked
                  
                  	//Disabled Submit
    				$('.Submit').attr("disabled", "disabled");
            	}
    	});
  	
});

Be carefull, I changed the class name to "buttonradioifRequired"

1 0

replied on July 17, 2020

Thanks, Olivier. Still not working. I did change the CSS class in the field too! There is nothing else in the JavaScript pane to interfer. Could there be something in the area above to interfer?

The button stays disable:

0 0

replied on July 17, 2020

Connie, you should change the condition's value (line 13).

If(value == "What you want")

{

... then do something

In your example, "What you want" should be "No, Send Back to Assistant"

0 0

replied on July 17, 2020

Okay, so that was what I was missing! Thanks!

Now: What about adding a piece to force the Comments field to be "Required" if the No option was picked on the radio button?

0 0

replied on July 17, 2020

I don't understand what you want. You want to force the comments field if "no" is selected right?

0 0

replied on July 17, 2020

For clarification:

Currently, the script is working with a Yes answer in the radio button to make the Submit button enabled. Great!
If the radio button choice is No, I will want it to
- leave the submit button disabled,
- and have the Comments box become Required. (They will then be hitting the Reject button to send back to the assistant.)

0 0

replied on July 17, 2020

The comments box is just a multi line text field, so they can give instruction to the assistant as to what is wrong.

0 0

replied on July 17, 2020

How do you submit the form if your button submit is "No" ?

I means

if "YES" => button Submit is enabled

if "NO" => button Submit is disabled (even if "Comments box" is required or not)

In my mind you should just change your condition

if "YES" => button Submit is enabled

if "NO" AND "Comments box" is null or empty => button Submit is disabled

if "NO" AND "Comments box" is not null or empty => button Submit is enabled

That means you should change your condition too.

If radiobutton changed OR if commentsbox changed

0 0

replied on July 17, 2020

The reject button, which in the process diagram directs the form back the the assistant:

0 0

Question

Question

JavaScript for disable submit, then enable and make a field required

Replies

Sign in to reply to this post.