<div class="d-flex align-items-center">
<div class="container-fluid" style="float: right;">
<form class="d-flex">
<input type="text" placeholder="Search" aria-label="Search" style="width: 400px;" id="searchTerm" name="searchTerm" ></input>
<script>
var inputVal = document.getElementById("searchTerm").value;
</script>
<a href="/articles/search" class="btn btn-success" onclick="location.href=this.href+'?term='+inputVal;" style="width: 100px;">Search</a>
</form>
</div>
</div>I am trying to pass the value from the input to a new page and then retrieve that variable on the next page. I am not sure that I am passing it correctly and am not sure how to retrieve it once it is sent to the next page.
You can use the "change" event listener:
let inputElement = document.querySelector("#searchTerm");
inputElement.addEventListener("change", ()=>{
let inputVal = document.getElementById("searchTerm").value;
let anchorElement = document.querySelector(".d-flex > a");
anchorElement.href = `/articles/search/${inputVal}`;
});