How to replace edit box of hyperlink to display link from editForm.aspx in SharePoint Online by using jquery

Question

I am working with SharePoint Online editForm.aspx page. I am passing default value of hyperlink and this will be never changed. Now, I want to remove/replace edit box of hyperlink to clickable only link from editForm.aspx in SharePoint Online by using jquery.

Answer 1

You can use sputility.js to make columns as read-only on edit form. Here are urls' for your reference: https://github.com/kitmenke/sputility

https://archive.codeplex.com/?p=sputility

SPUtility.GetSPField('HyperlinkColumn').MakeReadOnly();

Kindly ensure that your edit form is the default one not the custom one.

Answer 2

Create new custom edit form using the designer and search for link column in the code. You should be able see link column like this :

                            <SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="Edit" FieldName="link1" __designer:bind="{ddwrt:DataBind('u',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@link1')}"/>

Then change the ControlMode="Edit" to ControlMode="Display"

                            <SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="Display" FieldName="link1" __designer:bind="{ddwrt:DataBind('u',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@link1')}"/>

This would change the editable link column to readonly.