title: <a> href information from a form field for signature template webpage not working as intended
body: <p>I'm working on a signature template page for my companies Intranet and have managed to get it working and looking almost how I want.</p>
  
  <p>I'm trying to get link information updated from my forms without changing the displayed text.   </p>
  
  <p>I did manage to get it to change the <code>href</code> but it's adding extra info in the <code>href</code> that's not needed.</p>
  
  <p>Here's the link to my code <a href="https://jsfiddle.net/kogcyb3z/" rel="nofollow noreferrer">https://jsfiddle.net/kogcyb3z/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function writeName() {
    document.getElementById("pName").innerHTML = document.getElementById("sig-full-name").value;
    document.getElementById("pTitle").innerHTML = document.getElementById("sig-job-title").value;
    document.getElementById("ad1").innerHTML = document.getElementById("sig-address1").value;
    document.getElementById("ad2").innerHTML = document.getElementById("sig-address2").value;
    document.getElementById("oPhone").innerHTML = document.getElementById("sig-office-phone").value;
    document.getElementById("mPhone").innerHTML = document.getElementById("sig-mobile-phone").value;
    document.getElementById("fNumber").innerHTML = document.getElementById("sig-fax-number").value;
    document.getElementById("lNumber").innerHTML = document.getElementById("sig-license-number").value;
    document.getElementById("sFile").href = document.getElementById("sig-sharefile").value;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #FFFFFF;
  }
  
  h2.sig-header {
    color: #0F2A3B;
    font-family: "Calibri";
    font-size: 30px;
    font-weight: 500;
    padding-top: 0;
    margin-top: 0
  }
  
  .sig-input-form {
    background: #f2f2f2;
    border-width: 0;
    border-radius: 0 3px 3px 3px;
    padding: 20px;
    padding-bottom: 12px
  }
  
  .sig-preview-name {
    color: #0F2A3B;
    font-family: "Calibri";
    font-size: 20px;
    font-weight: 700;
    padding-top: 0;
    margin-top: 0
  }
  
  .sig-input-label {
    color: #0F2A3B;
    font-family: "Calibri";
    font-size: 15px;
    font-weight: 100;
    padding-top: 0;
    margin-top: 0
  }
  
  .sig-input-field {
    color: #0F2A3B;
    font-family: "Calibri";
    font-size: 14px;
    font-weight: 400;
    padding-top: 0;
    margin-top: 0
  }
  
  .sig-preview-title {
    color: #0F2A3B;
    font-family: "Calibri";
    font-size: 18px;
    font-weight: 400;
    padding-top: 0;
    margin-top: 0
  }
  
  .sig-preview-info {
    color: #0F2A3B;
    font-family: "Calibri";
    font-size: 30px;
    font-weight: 500;
    padding-top: 0;
    margin-top: 0
  }
  
  .sig-preview-links {
    color: #0F2A3B;
    font-family: "Calibri";
    font-size: 30px;
    font-weight: 500;
    padding-top: 0;
    margin-top: 0
  }
  
  .button-label {
    color: #0F2A3B;
    font-family: "Calibri";
    font-size: 20px;
    font-weight: 500;
    padding-top: 0;
    margin-top: 0
  }
  
  .button-generate {
    color: #0F2A3B;
    font-family: "Calibri";
    font-size: 20px;
    font-weight: 500;
    padding-top: 0;
    margin-top: 0 border: 3px solid #eee;
    border-radius: 4px;
  }
  
  .sig-input-field {
    background: #fff;
    border: 1px solid #eee;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-bottom: 2px solid #dedede;
    color: #555 !important;
    font-family: "Calibri" !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-align: left;
    padding: 9px !important;
    letter-spacing: .5px;
    border-radius: 4px;
    vertical-align: middle;
    margin: 0;
    height: 38px;
    box-sizing: border-box
  }
  
  .sig-input-form {
    float: left;
    width: 50%
  }
  
  .sig-control.half-width.left {
    float: left;
    width: 50%
  }
  
  .sig-control.half-width.right {
    float: right;
    width: 50%
  }
  
  .sig-control.left {
    float: left;
    width: 100%
  }
  
  #sig-preview {
    float: right;
    padding-left: 10px;
    width: 50%
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2 class="sig-header"&gt;Your Information&lt;/h2&gt;
  &lt;div class="sig-input-form"&gt;
    &lt;div class="sig-control half-width left"&gt;
      &lt;div class="sig-label"&gt;
        &lt;label class="sig-input-label" for="sig-full-name"&gt;Full Name&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="sig-input"&gt;
        &lt;input class="sig-input-field" id="sig-full-name" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="sig-control half-width right"&gt;
      &lt;div class="sig-label"&gt;
        &lt;label class="sig-input-label" for="sig-job-itle"&gt;Job Title&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="sig-input"&gt;
        &lt;input class="sig-input-field" id="sig-job-title" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="sig-control half-width left"&gt;
      &lt;div class="sig-label"&gt;
        &lt;label class="sig-input-label" for="sig-address1"&gt;Street Address&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="sig-input"&gt;
        &lt;input class="sig-input-field" id="sig-address1" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="sig-control half-width right"&gt;
      &lt;div class="sig-label"&gt;
        &lt;label class="sig-input-label" for="sig-sig-address2"&gt;City, State Zip&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="sig-input"&gt;
        &lt;input class="sig-input-field" id="sig-address2" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="sig-control half-width left"&gt;
      &lt;div class="sig-label"&gt;
        &lt;label class="sig-input-label" for="sig-office-phone"&gt;Office Phone&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="sig-input"&gt;
        &lt;input class="sig-input-field" id="sig-office-phone" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="sig-control half-width right"&gt;
      &lt;div class="sig-label"&gt;
        &lt;label class="sig-input-label" for="sig-mobile-phone"&gt;Mobile Phone&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="sig-input"&gt;
        &lt;input class="sig-input-field" id="sig-mobile-phone" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="sig-control half-width left"&gt;
      &lt;div class="sig-label"&gt;
        &lt;label class="sig-input-label" for="sig-fax-number"&gt;Fax Number&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="sig-input"&gt;
        &lt;input class="sig-input-field" id="sig-fax-number" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="sig-control half-width right"&gt;
      &lt;div class="sig-label"&gt;
        &lt;label class="sig-input-label" for="sig-email"&gt;Email Address&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="sig-input"&gt;
        &lt;input class="sig-input-field" id="sig-email" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="sig-control half-width left"&gt;
      &lt;div class="sig-label"&gt;
        &lt;label class="sig-input-label" for="sig-license-number"&gt;License Number&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="sig-input"&gt;
        &lt;input class="sig-input-field" id="sig-license-number" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="sig-control half-width right"&gt;
      &lt;div class="sig-label"&gt;
        &lt;label class="sig-input-label" for="sig-sharefile"&gt;ShareFile Link&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="sig-input"&gt;
        &lt;input class="sig-input-field" id="sig-sharefile" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  
  &lt;div class="sig-preview"&gt;
    &lt;div&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" style="display: inline;" width="272" height="92" border="0"&gt;&lt;/div&gt;
    &lt;div&gt;
      &lt;font color="#0F2A3B"&gt;&lt;span style="margin:0;font-size:14pt;font-weight:700;font-family:Calibri;" id="pName"&gt;John Doe&lt;/span&gt;&lt;span style="margin:0;font-size:14pt;font-weight:bold;font-family:Calibri;"&gt; | &lt;/span&gt;&lt;span style="margin:0;font-size:14pt;font-weight:100;font-family:Calibri;"
          id="pTitle" class=sig-preview-title&gt;Widget Maker&lt;/span&gt;&lt;/font&gt;
    &lt;/div&gt;
    &lt;div style="margin:0;font-size:11pt;font-weight:100;font-family:Calibri;font-style=normal"&gt;
      &lt;font color="#0F2A3B"&gt;&lt;span id="ad1"&gt;101 Anywhere Court, Suite 203&lt;/span&gt;&lt;span&gt; | &lt;/span&gt;&lt;span id="ad2"&gt;Anytown, ST 55555&lt;/span&gt;
        &lt;div&gt;tel: &lt;span id=oPhone&gt;555-555-5555&lt;/span&gt; | cell: &lt;span id=mPhone&gt;555-555-6666&lt;/span&gt; | fax: &lt;span id=fNumber&gt;555-555-6666&lt;/span&gt;&lt;/div&gt;
      &lt;/font&gt;
      &lt;div style="margin:0;font-size:11pt;font-weight:100;font-family:Calibri;font-style=normal"&gt;
        &lt;font color="#0F2A3B"&gt;&lt;span&gt;NMLS# &lt;/span&gt;&lt;span id="lNumber"&gt;123456&lt;/span&gt;&lt;/font&gt;
      &lt;/div&gt;
      &lt;div style="margin:0;font-size:9pt;font-weight:100;font-family:Calibri;"&gt;
        &lt;font color="#1F4E79"&gt;&lt;span&gt;&lt;a style="text-decoration:none;" href="https://google.com/" target="_blank"&gt;&lt;span&gt;Website&lt;/span&gt;&lt;/a&gt;
          |
          &lt;a style="text-decoration:none;" href="https://maps.google.com" target="_blank"&gt;&lt;span&gt;Map&lt;/span&gt;&lt;/a&gt; |
          &lt;span&gt;&lt;a style="text-decoration:none;" href="mailto:john.doe@google.com" target="_blank"&gt;Email&lt;/a&gt;&lt;/span&gt; |
          &lt;span&gt;&lt;a id="sFile" style="text-decoration:none;" href="https://google.sharefile.com/r-rdf834da7a8149478" target="_blank"&gt;Send me large files using Sharefile&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;
        &lt;/font&gt;
      &lt;/div&gt;
  
      &lt;div class="sig-control-right"&gt;
        &lt;div class="button-label"&gt;
          &lt;span&gt;&lt;br&gt; &lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="button-input"&gt;
          &lt;button class="button-generate" onclick="writeName()"&gt;Generate Signature&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help is appreciated.</p>