生成HTML鏈接從表格中的給定值

我試圖從一個表單中的給定值生成鏈接，該鏈接將允許跟隨生成鏈接的用戶直接轉到基於他們信息的某個網站的某個區域輸入。但是，當我嘗試使用當前的方法時，Web應用程序會在用戶跟隨鏈接時彈出，因爲span標記留在鏈接中，並將其視爲惡意。這裏是我到現在爲止：生成HTML鏈接從表格中的給定值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" > 
     <head lang="en"> 
    <title>Example Link Generator</title> 
     <meta charset="UTF-8"> 
     <script language="JavaScript"> 
     function showInput() { 
      document.getElementById('displaycust').innerHTML = 
       document.getElementById("cust").value; 
      document.getElementById('displayjob').innerHTML = 
       document.getElementById("job").value; 
      document.getElementById('displaysite').innerHTML = 
       document.getElementById("site").value;    
      document.getElementById('displayname').innerHTML = 
       document.getElementById("name").value;    

     } 
     </script> 

     </head> 
    <body> 

     <form> 
     <legend><b>Example Link Generator</b></legend> 
     <br> 
     <br> 
     CustId= (Cengage is default):<br> 
     <input type="text" name="cust" maxlength="40" id="cust"  value="AC2BB2C8AD16284FA51A8D42D7D1D526"> 
     <br><br> 
     JobId=:<br> 
     <input type="text" name="job" maxlength="40" id="job" value=""> 
     <br><br> 
     Site (07 is Offset, 13 is Digital):<br> 
     <input type="number" name="site" maxlength="2" id="site" value="07"> 
     <br><br> 
    Name (Used as link display text):<br> 
<input type="text" name="name" id="name" value=""> 
<br><br> 


     </form> 

     <input type="submit" onclick="showInput();"><br/><br> 
     <label><b>Link (highlight and copy):</b></label> 
     <p> 


    <!-- Problem area--> 
     <a href="https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite<span id='displaysite'></span>%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3d<span id='displaycust'></span>%26JobId%3d<span id='displayjob'></span>"><span id='displayname'></span> 
    </a> 
    <!-- End problem area --> 

     </p> 
    </body> 
    </html> 

    <br><br><br><br> 
     <span id='displaycust'></span><br><br> 
     <span id='displayjob'></span><br><br> 
     <span id='displaysite'></span><br><br>

當我嘗試生成不顯示文本的鏈接，點擊鏈接將仍然踢用戶從Web應用程序，但突出。文本，然後複製和粘貼鏈接到地址欄，成功登錄的用戶在這種方法看起來是這樣的：

 <!-- Current method without display name for link --> 
    https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite<span id='displaysite'></span>%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3d<span id='displaycust'></span>%26JobId%3d<span id='displayjob'></span>" 
    <!-- End current method -->

我希望能夠根創建與顯示文本的鏈接，但在生成的URL中刪除任何殘留標記語言。

例如，這將是一個糟糕的鏈接：

https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite%3Cspan%20id=%27displaysite%27%3E%3C/span%3E%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3d%3Cspan%20id=%27displaycust%27%3E%3C/span%3E%26JobId%3d%3Cspan%20id=%27displayjob%27%3E%3C/span%3E

這將是一個很好的鏈接：

https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite07%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3dAC2BB2C8AD16284FA51A8D42D7D1D526%26JobId%3dAC2BB2C8AD16284FA51A8D42D7D1D526「

解決任何幫助，將不勝感激。

來源

2017-08-01 Matthew

在HTML屬性（例如鏈接）中不能有一個span標記

一個更好的辦法是串聯在JavaScript中的結果，然後將鏈接值設定爲連接後的結果

編輯：這是我的答案的代碼示例：

function showInput() { 
    var cust = document.getElementById("cust").value; 
    var job = document.getElementById("job").value; 
    var site = document.getElementById("site").value; 
    var name = document.getElementById("name").value; 

    var generatedLink = 
     'https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite' 
     + site 
     + '%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3d' 
     + cust 
     + '%26JobId%3d' 
     + job; 

    var elementThatYouAreEditing = document.getElementById('displayname'); 
    elementThatYouAreEditing.href = generatedLink; 
    elementThatYouAreEditing.innerText = name; 
}

和你a標籤將

<a href="" id="displayname"></a>

注意，我並不是說這是做到這一點的最佳方式，僅僅是一個辦法做到這一點。

來源

2017-08-01 23:40:58

這很完美。我正在按照您的原始建議修復它，但我更喜歡編輯中的方法。非常感謝你。 – Matthew

生成HTML鏈接從表格中的給定值

回答

相關問題