<a> href署名テンプレートページのフォームフィールドからの情報が意図したとおりに機能しない

私は企業のイントラネット用の署名テンプレートページを作成しています。<a> href署名テンプレートページのフォームフィールドからの情報が意図したとおりに機能しない

表示されたテキストを変更せずにフォームからリンク情報を更新しようとしています。

hrefを変更することができましたが、それは不要な追加情報をhrefに追加しています。

は、ここですべてのヘルプは高く評価され、私のコードhttps://jsfiddle.net/kogcyb3z/

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; 
 
}

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% 
 
}

<h2 class="sig-header">Your Information</h2> 
 
<div class="sig-input-form"> 
 
    <div class="sig-control half-width left"> 
 
    <div class="sig-label"> 
 
     <label class="sig-input-label" for="sig-full-name">Full Name</label> 
 
    </div> 
 
    <div class="sig-input"> 
 
     <input class="sig-input-field" id="sig-full-name" type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="sig-control half-width right"> 
 
    <div class="sig-label"> 
 
     <label class="sig-input-label" for="sig-job-itle">Job Title</label> 
 
    </div> 
 
    <div class="sig-input"> 
 
     <input class="sig-input-field" id="sig-job-title" type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="sig-control half-width left"> 
 
    <div class="sig-label"> 
 
     <label class="sig-input-label" for="sig-address1">Street Address</label> 
 
    </div> 
 
    <div class="sig-input"> 
 
     <input class="sig-input-field" id="sig-address1" type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="sig-control half-width right"> 
 
    <div class="sig-label"> 
 
     <label class="sig-input-label" for="sig-sig-address2">City, State Zip</label> 
 
    </div> 
 
    <div class="sig-input"> 
 
     <input class="sig-input-field" id="sig-address2" type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="sig-control half-width left"> 
 
    <div class="sig-label"> 
 
     <label class="sig-input-label" for="sig-office-phone">Office Phone</label> 
 
    </div> 
 
    <div class="sig-input"> 
 
     <input class="sig-input-field" id="sig-office-phone" type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="sig-control half-width right"> 
 
    <div class="sig-label"> 
 
     <label class="sig-input-label" for="sig-mobile-phone">Mobile Phone</label> 
 
    </div> 
 
    <div class="sig-input"> 
 
     <input class="sig-input-field" id="sig-mobile-phone" type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="sig-control half-width left"> 
 
    <div class="sig-label"> 
 
     <label class="sig-input-label" for="sig-fax-number">Fax Number</label> 
 
    </div> 
 
    <div class="sig-input"> 
 
     <input class="sig-input-field" id="sig-fax-number" type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="sig-control half-width right"> 
 
    <div class="sig-label"> 
 
     <label class="sig-input-label" for="sig-email">Email Address</label> 
 
    </div> 
 
    <div class="sig-input"> 
 
     <input class="sig-input-field" id="sig-email" type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="sig-control half-width left"> 
 
    <div class="sig-label"> 
 
     <label class="sig-input-label" for="sig-license-number">License Number</label> 
 
    </div> 
 
    <div class="sig-input"> 
 
     <input class="sig-input-field" id="sig-license-number" type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="sig-control half-width right"> 
 
    <div class="sig-label"> 
 
     <label class="sig-input-label" for="sig-sharefile">ShareFile Link</label> 
 
    </div> 
 
    <div class="sig-input"> 
 
     <input class="sig-input-field" id="sig-sharefile" type="text"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br> 
 

 
<div class="sig-preview"> 
 
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" style="display: inline;" width="272" height="92" border="0"></div> 
 
    <div> 
 
    <font color="#0F2A3B"><span style="margin:0;font-size:14pt;font-weight:700;font-family:Calibri;" id="pName">John Doe</span><span style="margin:0;font-size:14pt;font-weight:bold;font-family:Calibri;"> | </span><span style="margin:0;font-size:14pt;font-weight:100;font-family:Calibri;" 
 
     id="pTitle" class=sig-preview-title>Widget Maker</span></font> 
 
    </div> 
 
    <div style="margin:0;font-size:11pt;font-weight:100;font-family:Calibri;font-style=normal"> 
 
    <font color="#0F2A3B"><span id="ad1">101 Anywhere Court, Suite 203</span><span> | </span><span id="ad2">Anytown, ST 55555</span> 
 
     <div>tel: <span id=oPhone>555-555-5555</span> | cell: <span id=mPhone>555-555-6666</span> | fax: <span id=fNumber>555-555-6666</span></div> 
 
    </font> 
 
    <div style="margin:0;font-size:11pt;font-weight:100;font-family:Calibri;font-style=normal"> 
 
     <font color="#0F2A3B"><span>NMLS# </span><span id="lNumber">123456</span></font> 
 
    </div> 
 
    <div style="margin:0;font-size:9pt;font-weight:100;font-family:Calibri;"> 
 
     <font color="#1F4E79"><span><a style="text-decoration:none;" href="https://google.com/" target="_blank"><span>Website</span></a> 
 
     | 
 
     <a style="text-decoration:none;" href="https://maps.google.com" target="_blank"><span>Map</span></a> | 
 
     <span><a style="text-decoration:none;" href="mailto:[email protected]" target="_blank">Email</a></span> | 
 
     <span><a id="sFile" style="text-decoration:none;" href="https://google.sharefile.com/r-rdf834da7a8149478" target="_blank">Send me large files using Sharefile</a></span></span> 
 
     </font> 
 
    </div> 
 

 
    <div class="sig-control-right"> 
 
     <div class="button-label"> 
 
     <span><br> </span> 
 
     </div> 
 
     <div class="button-input"> 
 
     <button class="button-generate" onclick="writeName()">Generate Signature</button> 
 
     </div> 
 
    </div> 
 
    </div>

へのリンクです。

出典

2017-12-21 t25torx

あなたはsharefileリンクで

https://google.sharefile.com/r-rdf834da7a8149478

形式のURLを期待しているように私には見えます。

コードは、フォームフィールドの正確なエントリにのみ挿入されます。ブラウザが現在のページを基準にしたURIであるとブラウザが認識しているため、カーソルを置いたときに間違って表示されます。

だから、それがために更新します。あなたは私の心を吹いている

var sigval = document.getElementById("sig-sharefile").value; 
sigval = 'https://google.sharefile.com/' + sigval; 
document.getElementById("sFile").href = sigval;

出典

2017-12-21 15:03:02 Phil

デュード。実際には正しく動作していました。私はちょうどあなたが指摘したように、必要な形式でウェブサイトの情報を入力していませんでした。完全なhttps://example.comを使用すると、それがフィールドに出力されます。実際に私が必要とするのは、ユーザーがOutlookプラグインで作成した共有ファイルリンクからアドレス全体をコピーするためです。これはまた、電子メールフィールドのやり方を知るのを助けました。私は、ドキュメントオブジェクトにmailto：を追加するようにコードを作成する必要がありました。 href = "mailto：" + document.getElementById（ "sig-email"）。値; – t25torx

素晴らしいその答えがあなたに必要なものを手に入れたら、それを「受け入れた」とマークすることを検討してください。 – Phil

<a> href署名テンプレートページのフォームフィールドからの情報が意図したとおりに機能しない

答えて

関連する問題