Jump to content

Render Value of Editable Field As Clickable Link

Recommended Posts

Hello  - I just want to share this solution. I have a site field in my form that I  want the user to be redirected to when they click it. I know that I can render this as a link so users can click and access it directly however, I want to also give them the ability to edit the site that they entered and I believe you can't render the value of a text field as a link if the field is editable.

What I did was add an HTML block and created a custom text field that will act as my site field and use the script below. 

HTML block:

<label class="testlabel">Website <input type="text" class="test" onclick="navigate()" value="[@field:Website]" id="newfield" /></label>


<script type="text/javascript">
 //if the user update the value on the custom field, it will update the values on the original field as well. 
  var src = document.querySelector('[id*=newfield]');
  var dest = document.querySelector('[id*=EditRecordFIELDNAME]');
  src.onchange = function() {
    dest.value = this.value;
  //redirect the user upon clicking the field.
  function navigate(){


Header: - I re-create the styling of the original text field to the new custom field.

   color:blue !important;
   cursor: pointer !important;
   background: #FFFFFF;
    border-color: #CACACA;
    border-radius: 0px;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    padding: 5px 8px;
    width: 223px !important;
    margin-left: 25px;

    color: #545A60;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...