0

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!

Curtis Abbott
  • 3
  • 2
  • An autocomplete that gets populated with valid links would make more sense. You aren't validating any user input matches actual directories or is case correct and will have all sorts of frustrated users going to "not found" page – charlietfl Nov 22 '18 at 02:54
  • Thank you for your input. It is intentional to not allow any tips on the available subdirectory options because we want the people to specifically put in the info that they were given. The form is a backup for those who neglect to do so. – Curtis Abbott Nov 22 '18 at 06:31
  • That's what I mean .. an autocomplete that as they type requests are made to server to match what they are typing then gives them a link to that directory when it matches – charlietfl Nov 22 '18 at 06:52
  • Is that possible to do without revealing partial matches that might lead them to the wrong person? Such as Dav leading to Dave and David thus potentially misdirecting the lead. – Curtis Abbott Nov 22 '18 at 09:09
  • "Dav" would show both and any other matches and the list gets more filtered as you add more letters. Example http://easyautocomplete.com/ – charlietfl Nov 22 '18 at 13:16

1 Answers1

0

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.

Tuyen
  • 186
  • 1
  • 4
  • I was able to get the first code example above working wonderfully with info I found on the link you provided. Thank you so much! I'll provide a stripped down example. – Curtis Abbott Nov 22 '18 at 09:14
  • – Curtis Abbott Nov 22 '18 at 09:18
  • element.addEventListener('submit', event => { event.preventDefault(); // actual logic, e.g. validate the form console.log('Form submission cancelled.'); }); – Curtis Abbott Nov 22 '18 at 09:21