Generieren von HTML-Link von vorgegebenen Werten in Formular

Ich versuche, eine Verknüpfung von angegebenen Werten in einem Formular zu generieren, das dem Benutzer, der dem resultierenden Link folgt, basierend auf den Informationen direkt zu einem bestimmten Bereich einer Website gelangt eingeben. Wenn ich jedoch meine aktuelle Methode ausprobiere, startet die Webanwendung den Benutzer, wenn sie dem Link folgt, weil das span-Tag in dem Link zurückgelassen wird und es als bösartig empfindet. Hier ist, was ich habe schon jetzt:Generieren von HTML-Link von vorgegebenen Werten in Formular

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

Wenn ich versuche, eine Verbindung ohne Anzeigetext zu erzeugen, wird nach wie vor den Benutzer aus der Web-Anwendung treten auf den Link zu klicken, sondern markieren . der Text, dann kopieren und den Link zu der Adressleiste einfügen, meldet den Benutzer erfolgreich in das Verfahren sieht wie folgt aus:

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

ich gen in der Lage sein möchten, Erstellen Sie eine Verknüpfung mit dem Anzeigentext, aber entfernen Sie alle restlichen Auszeichnungssprachen in der resultierenden URL.

Zum Beispiel wäre dies eine schlechte Verbindung sein:

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

Dies wäre eine gute Verbindung sein:

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

Jede Hilfe diese bei der Lösung sehr geschätzt werden würde.

Quelle

2017-08-01 Matthew

Sie können kein Span-Tag innerhalb eines HTML-Attributs haben, z. B. den Link

Ein besserer Ansatz, die Ergebnisse in JavaScript zu verketten wäre, dann setzen Sie den Link Wert auf das verkettete Ergebnis

Edit: Hier ist ein Codebeispiel meiner Antwort:

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

und Ihre a Tag wäre

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

Bitte beachte, dass ich sage nicht, dass dies der beste Weg, dies zu tun, nur ein Weg, es zu tun.

Quelle

2017-08-01 23:40:58

Das ist perfekt. Ich war auf dem Weg, um es auf Ihren ursprünglichen Vorschlag zu beheben, aber ich mag die Methode von Ihrem Schnitt viel besser. Vielen Dank. – Matthew

Generieren von HTML-Link von vorgegebenen Werten in Formular

Antwort

Verwandte Themen