Redirect to a SubDirectory via Form Input in JavaScript

Question

When this project was first started we thought it would be super easy but after two days of failure, we are stumped.

Environment: MacBookPro - WordPress with Thrive Themes Architect

Goal: Create a simple form that allows visitors to input the name of a subdirectory into a form that instantly redirects them to that subdirectory upon clicking on the submit button.

Purpose: When a partner gives out their website URL which includes a subdirectory name sometimes the person fails to put in the subdirectory name and they go to the main site instead. This form would make it easy for them to get to the right place so that the right partner gets proper credit.

Theories: Could the redirect be being blocked by Browser security protocols or something? Is the coding off in some way? Is the method flawed?

Three of Many Failed Coding Attempts:

<script type="text/javascript">
  function Redirect(){
  var subDirectory= document.getElementById("sub_directory").value;
  window.location.href= "https://www.thewatercoach.com/" + subDirectory;
  }
</script>
<form>
  <label>www.theWaterCoach.com/</label>
  <input type="text" id="sub_directory">
  <button onclick="Redirect()">Submit</button>
</form>

Results: The page simply refreshes or reloads the pre-existing URL, but doesn't work at all.

<script type="text/javascript">
  function Redirect(){
  var subDirectory= document.getElementById("sub_directory").value;
  window.location.replace(subDirectory);
  }
</script>
<form>
  <label>www.theWaterCoach.com/</label>
  <input type="text" id="sub_directory">
  <button onclick="Redirect()">Submit</button>
</form>

Results: The page simply refreshes or reloads the pre-existing URL, but doesn't work at all.

<script type="text/javascript">
  function Redirect(){
  var subLink = document.getElementById("sub_Link");
  var subDirectory= document.getElementById("sub_directory").value;
  subLink.href = "https://www.theWaterCoach.com/" + subDirectory;
  subLink.click();
        }
</script>
<form>
   <label>www.theWaterCoach.com/</label>
   <input type="text" id="sub_directory">
   <button onclick="Redirect()">Submit</button>       
</form>
<a id="sub_Link" href="https://www.theWaterCoach.com/">.</a>

Results: This Coding Example did work reliably with FireFox but not on Chrome or Safari. It does not work via Chrome on a PC either. For testing purposes, you can enter Becca into the text box.

Any ideas or solutions will be greatly appreciated!

Answer 1

The submit button is located inside a form tag. Therefore, when you click submit, the browser simply sends a GET request to your homepage. The Javascript code to redirect got executed, but then it is terminated right before the GET request is sent.

Solution: You have to prevent the form from being submitted. Find out how: read this stackoverflow question.