[Resolved] How to make a field read only on post form?

[Author]

Posts

[himanshuS]

I have post form where I am passing value to a field through url param.

The field is relationship field and is populated with id of the parent post. I want user to see that field but not update it.

How can I do that on CRED forms?

[Jamal]

Hello and thank you for contacting the Toolset support.

You can use the attribute "readonly" of the Toolset field shortcode. For example:

[cred_field field='post_title' readonly='true' class='form-control' output='bootstrap']

Read more about the available attributes here
https://toolset.com/documentation/programmer-reference/forms/cred-shortcodes/#cred_field

[himanshuS]

Thanks Jamal. Read only status will not impact insertion of data by a url param. Right?

Also, this is a relationship field. Are are any special considerations because of that?

[Jamal]

You are right, "Readonly" status will not impact the insertion of data by a URL param. It will only prevent the user from changing the value of the field.

I am not sure to understand your last question, but I think it is worth mentioning this documentation article that explains how to automatically preselect a parent post in the case of a relationship.
https://toolset.com/course-lesson/selecting-parent-posts-when-using-forms-to-create-child-items/#creating-forms-when-a-parent-post-is-preselected

[himanshuS]

Jamal,

I made the change you suggested and field can still be modified on the front end. The field is a relationship select field.

I found this note in the documentation: "Readonly. Optional. Boolean. When set to true, the field will be read only. Read-only parameter can be applied only to text controls and not to other elements, like checkboxes or buttons. Defaults to false."

Will it not work for select dropdowns?

My code:
<div class="form-group">
<label>[cred_i18n name='@project-prompt-to-project-submission.parent-label']Project Prompt[/cred_i18n]</label>
[cred_field field='@project-prompt-to-project-submission.parent' readyonly='true' class='form-control' output='bootstrap' select_text='--- not set ---' required='true' urlparam='parent-project-prompt1-id']
</div>

[Jamal]

Exactly, the "readonly" attribute will not work for select fields. The remaining solution is to set it as read-only using Javascript code. Check this reply on a similar ticket https://toolset.com/forums/topic/parent-field-in-child-form-on-parent-template/#post-1136580

If this does not help, please allow me temporary access to your website. Let me know what form is it? and where it is used(URL)? And I'll see what I can do. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal]

You had a slight error in the custom Javascript code. The code was using the attribute "readonly", when it should use the attribute "disabled" because the field is an <select> element.
hidden link

So, the following code is working now:

(function( $ ) {
  $('select[name="@project-prompt-to-project-submission.parent"]').attr('disabled',true);
})(jQuery);

Check this screenshot hidden link

[himanshuS]

Thanks, Jamal. My issue is resolved now.