Appending form input value to action url as path

Today, you will learn how to append form input value to the current url as path after submitting the form.

For example we have the following code and whenever someone clicks the submit button, we want to add the input value to the url as the path.

<form action="https://example.com/" target="_blank">
 <input type="text" placeholder="Enter Your Query" name="query">
 <input type="submit" value="Search">
</form>

If you run the above code and after entering some values in the input field if you click on the submit button you will see a new window open and here the URL format will be as follows.

https://example.com/?query=input-value

How to pass input value in URL Using JavaScript. #

If you notice in the example above, you can see that our url has a basic structure. You cannot change the format of the URL after submitting the form. So in this case we can use JavaScript to pass the input value to the URL.

<input type="text" placeholder="Enter Your Query">
<input type="button" value="Search" onclick="myFunction()">
<script>
 function myFunction(){
  const action = "https://example.com/" + document.querySelector("input").value;
  window.open(action)
}
</script>