Question

Filling Read-Only radio button from URL

Forms

Updated May 18, 2021

asked on May 18, 2021

I'm trying to fill a radio button in a form using the URL. The radio button needs to be read-only so the user cannot change it. I'm using the following code:

$(document).on("ready", function() {
	$('.readonly :input').attr({'disabled':true});
});
$('.Submit').on('click', function(){ 
        $('.readonly :input').attr('disabled', false); });

It works for setting the radio buttons as read-only, and I can see that the radio selection has been made, but I think the second part where the radio is set back to enabled isn't working because it's not passing on the value of the radio button. The variable is empty. This is a one-step form that calls a workflow, and the workflow needs this variable. Anybody have any idea what I'm doing wrong?

0 0

Answer

SELECTED ANSWER

replied on May 18, 2021 • Show version history

I tested it out on one of my test forms and got it to work, so there may be something else causing the problem.

Which version of Forms are you using?

Another difference with my code is that the event handler for the button click is inside of the document ready event.

Maybe the button just doesn't exist yet when it's trying to add the handler.

$(document).ready(function(){
  $('.readonly :input').prop('disabled',true);

  $('.Submit').on('click',function(){
    $('.readonly :input').prop('disabled',false);
  });
});

EDIT: Something else I just remembered from doing this in the past. You want to account for situations in which the form fails validation and doesn't submit.

If you just remove the disabled property on click, then if the form is invalid for any reason the user would be able to edit the value before trying to submit again.

To prevent that, I usually check the validation state before making changes inside the if block, but since you only have one change to make you could just tie it to the validation boolean directly.

$(document).ready(function(){
  $('.readonly :input').prop('disabled',true);
  
  $('.Submit').on('click',function(){
    // check if form is valid
    var valid = $('.cf-form').parsley().isValid();

    // only enable fields if form is valid and will submit
    $('.readonly :input').prop('disabled',!valid);
  });
});

1 0

Replies

replied on May 18, 2021 • Show version history

Try .prop('disabled',false);

I'm not sure if setting true/false with .attr() always works.

If .prop() still doesn't work, try .removeAttr('disabled');

0 0

replied on May 18, 2021

I've tried using .removeAttr('disabled');, but it didn't work. I'll give .prop() a shot.

0 0

SELECTED ANSWER

replied on May 18, 2021 • Show version history

I tested it out on one of my test forms and got it to work, so there may be something else causing the problem.

Which version of Forms are you using?

Another difference with my code is that the event handler for the button click is inside of the document ready event.

Maybe the button just doesn't exist yet when it's trying to add the handler.

$(document).ready(function(){
  $('.readonly :input').prop('disabled',true);

  $('.Submit').on('click',function(){
    $('.readonly :input').prop('disabled',false);
  });
});

EDIT: Something else I just remembered from doing this in the past. You want to account for situations in which the form fails validation and doesn't submit.

If you just remove the disabled property on click, then if the form is invalid for any reason the user would be able to edit the value before trying to submit again.

To prevent that, I usually check the validation state before making changes inside the if block, but since you only have one change to make you could just tie it to the validation boolean directly.

$(document).ready(function(){
  $('.readonly :input').prop('disabled',true);
  
  $('.Submit').on('click',function(){
    // check if form is valid
    var valid = $('.cf-form').parsley().isValid();

    // only enable fields if form is valid and will submit
    $('.readonly :input').prop('disabled',!valid);
  });
});

1 0

replied on May 18, 2021

That must have been it. I used your code and it worked flawlessly. Thanks!

0 0

You are not allowed to follow up in this post.

Question

Question

Filling Read-Only radio button from URL

Answer

Replies

Sign in to reply to this post.