从表单中的给定值生成HTML链接

时间:2017-08-01 23:34:06

标签: javascript html

我尝试从表单中的给定值生成链接,该表单允许跟随结果链接的用户根据他们输入的信息直接转到网站的某个区域。但是,当我尝试使用当前的方法时,Web应用程序会在用户关注链接时将其踢出,因为span标记在链接中被遗忘,并且它将其视为恶意。 这就是我现在所拥有的:

    <!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 -->

我希望能够生成包含显示文字的链接,但在结果网址中删除任何残留的标记语言。

例如,这将是一个糟糕的链接:

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&#34;

任何帮助解决这个问题都将非常感激。

1 个答案:

答案 0 :(得分:0)

您不能在HTML属性中包含span标记,例如链接。

更好的方法是在JavaScript中连接结果,然后将链接值设置为连接结果

编辑:这是我的答案的代码示例:

a

,您的<a href="" id="displayname"></a> 标记

if($('.element').css('display') == 'none') {
    alert("none");
} else { 
    alert("block");
}

请注意,我并不是说这是最好的方法,只是一种方法。