Code block - help needed

Site URL: https://www.globalpeoplesolutions.co.uk

Hi,

I've added a code block to a page and I'm struggling to get this to work exactly as it should - could anyone help, please?

I borrowed a snippet from this site (https://sf.digital/squarespace/client-login-pages), with the idea being that visitors to this section of the website could "log in" using a short code that then takes them to a specific URL. That part is working fine, however there is another issue.

The page is https://www.globalpeoplesolutions.co.uk/login

Expected behaviour is as follows:

1. User enters the code 'abcde' into the input field.
2. If fewer than 5 characters are entered, a red text label appears under the input saying "Code is not long enough". When 5 characters are entered, the text turns green and says "Code is the correct length".
3. When the code = 5 characters, the button below is activated (i.e. no longer greyed out) and can be clicked.

The problem I'm having is that this doesn't seem to be working UNTIL a user visits the page and then refreshes it. After the page refresh, both the text labels and the button activation work as they should. I'm not sure what action the page refresh is having, and why this doesn't work for users on their first visit.

NB: after refreshing the page, the text labels and button activations will always remain as they should, until you load from a new browser or in Incognitio mode etc.

Does anyone know what the code is missing to fix this?

Thanks!
 

The full code I've entered into the code block is as follows:

<div id="submitCodeWrapper">
  <input id="event-code-input" type="text" maxlength="5" class="box" autofocus />
  <input id="event-code-submit" class="myButton"  type="submit" value="Submit" disabled="disabled">
  <div id="feedback"></div>
 </div>
<script>
  var eventCode = document.getElementById("event-code-input");
  var codeSubmit = document.getElementById("event-code-submit");
  
  eventCode.addEventListener("keyup", function () {
    if (eventCode.value.length < 5) {
      feedback.style.color = "red";
      feedback.textContent = 'Code is not long enough';
      codeSubmit.disabled = true;
      }
    else if (eventCode.value.length = 5) {
      feedback.style.color = "green";
      feedback.textContent = 'Code is the correct length';
      codeSubmit.disabled = false;
      }
  });    
  codeSubmit.addEventListener("click", function () {    
    location.href = '/' + eventCode.value; return false;
});
</script>
<style>
.myButton {
  height:53px;
  margin-left:10px;
  width: 145px;
  padding: 10px;
  background-color: #00a87b;
  color: #fff;
  border-radius: 4px;   
  border: 0;
  letter-spacing: 1px;
  color: #fff;
 }  
#event-code-input {
  height:48px;
  font-size: 20px;
  padding-left:10px;
}
#feedback {
  margin-top: 10px;
  color:red;
}
</style>

Disable Ajax Loading. https://support.squarespace.com/hc/en-us/articles/115000253288-Ajax-loading

Thank you!