Render Value of Editable Field As Clickable Link

[autonumber]

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>

Footer:

<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(){
    window.open("[@field:FIELDNAME]",'_blank');
  }

</script>

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

<style>
.test{
   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;
}

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

</style>