I'm basically trying to generate URLs by having the user enter their FSAN number, the rest of the URL always remains the same.
I'm giving data back to the client via message.innerHTML but I need this to be clickable to the URL provided back to the user.
Demo can be found here: https://tech5dev.co.za/index2.html Active fsan number you can use: 48575443F9D778A8
So basically when submitting, it's returning correctly, but I need it to be clickable to the same URL.
Any feedback would be greatly appreciated! Code below:
<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>
Update your innerHTML as below.
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>";
And for on Submit directly launching the link
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");
}
OP Comment
Follow up question if I may... Is it possible to have the submit button act as a link, so that when you click submit it direct you to the URL that the a href provides back at the moment?
You can do this:
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>You need to create/add the <a href=""> in 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>