I have an html page that requires getting the value of an input when a button is pressed so it can be used as a variable in a link. For example, my website would detect "word" being written in the input and would redirect to the link "google.com/word" when the button is clicked. Thanks for any help in advance!
HTML Code:
<td><input value="Input text Here..."></input></td>
<td><a href='https://example.com/test/VALUEFROMINPUTHERE'><button id="click">Click this Button</button></a></td>
There is not way to get input value only using HTML... give your button an onclick attribute:
<td>
<a href='https://example.com/test/VALUEFROMINPUTHERE'>
<button id="click" onclick="click()">Click this Button</button>
</a>
</td>
and your input an ID:
<td>
<input value="Input text Here..." id="input">
</td>
and add JS:
function click() {
let val = document.getElementById("input").value
window.location.href = "https://www.google.com/search?q=" + val
}
All I'm doing here is geting the input's value, and changing the window's href to the wanted word, also making sure the word is being searched in google by adding the "https://www.google.com/search?q=" before adding the value of the input.
In this code, when the a tag is clicked, it triggers a JS function that grabs the value of the input with the id "value" and opens thee link with by concatenating it's value to the end of the URL with the window.open() function.
<input type="text" placeholder="Enter Text" id="value" />
<a href="#" onClick="openLink()">Click Me</a>
<script>
function openLink() {
let value = document.getElementById("value").value
window.open(`https://www.example.com/${value}`)
}
</script>