Básicamente, estoy tratando de generar URL haciendo que el usuario ingrese su número FSAN, el resto de la URL siempre permanece igual.
Estoy devolviendo datos al cliente a través de message.innerHTML, pero necesito que se pueda hacer clic en la URL proporcionada al usuario.
La demostración se puede encontrar aquí: https://tech5dev.co.za/index2.html Número fsan activo que puede usar: 48575443F9D778A8
Entonces, básicamente, al enviar, regresa correctamente, pero necesito que se pueda hacer clic en la misma URL.
¡Cualquier comentario sería muy apreciado! Código a continuación:
<body> <h3>Please enter your FSAN number</h3> <input id="userInput"<br><br> <button onclick="myFunction()">Submit</button> <h1 id="message"></h1> <style> body{ background-color: darkgray; text-align: center; color: white; } </style> <script> function myFunction(){ let userInput = document.querySelector("#userInput"); let message = document.querySelector("#message"); message.innerHTML ="https://shop.linklayer.co.za/Service?Search.SearchString="+userInput.value+"&Search.ComplexName=&Search.Unit=&Search.NetworkType="; } </script> </body> </html>Actualice su HTML interno como se muestra a continuación.
message.innerHTML ="<a href='https://shop.linklayer.co.za/Service?Search.SearchString="+userInput.value+"&Search.ComplexName=&Search.Unit=&Search.NetworkType=' target='_blank'> Updated Link </a>";Y para Enviar directamente lanzando el enlace
function myFunction() { let userInput = document.querySelector("#userInput"); let message = document.querySelector("#message"); window.open("https://shop.linklayer.co.za/Service?Search.SearchString=" + userInput.value + "&Search.ComplexName=&Search.Unit=&Search.NetworkType=", "_blank"); }Comentario OP
Continúe con la pregunta si me permite... ¿Es posible que el botón Enviar actúe como un enlace, de modo que cuando haga clic en Enviar lo dirija a la URL que proporciona un href en este momento?
Puedes hacerlo:
const userInput = document.getElementById("userInput"); const message = document.getElementById("message"); const button = document.getElementById("button"); button.addEventListener("click", e => { e.preventDefault(); //added only for demo to see result in console.log const link = e.currentTarget.href = ` https://shop.linklayer.co.za/Service?Search.SearchString=${userInput.value}&Search.ComplexName=&Search.Unit=&Search.NetworkType="> `; console.log(link) }); #button { background-image: linear-gradient(to top, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%); padding: 1px 4px; border: 1px solid #000; border-radius: 3px; color: black; text-decoration: none; font-family: "MS Shell Dlg 2"; font-size: 13.3px; } <input id="userInput" /> <a id="button" href="">Submit</a> <h1 id="message"></h1> Debe crear/agregar el <a href=""> en innerHTML
const userInput = document.getElementById("userInput"); const message = document.getElementById("message"); const button = document.getElementById("button"); button.addEventListener("click", () => { message.innerHTML = ` <a href="https://shop.linklayer.co.za/Service?Search.SearchString=${userInput.value}&Search.ComplexName=&Search.Unit=&Search.NetworkType=">Link</a> `; }); <input id="userInput" /> <button type="button" id="button">Submit</button> <h1 id="message"></h1>