Redirect Input Field Based on Entry (Zip Code)

Question

I have a list of zip codes (service area) and 11 different URLs (booking forms).

Based on the zip code entered in input field, I need to redirect to a URL. Plus if the zip code entered doesn't exist, redirect to a different URL (general contact form).

Here is what I have been working with:

var location1 = ['97049', '97067', '97011'];
var location2 = ['97055', '97023', '97022', '97009', '97089'];
var location3 = ['97013', '97042', '97004', '97017', '97038'];
var location4 = ['97019', '97014'];
var location5 = ['97080', '97030', '97060', '97024', '97230'];
var location6 = ['97222', '97267', '97015', '97086', '97045', '97027'];
var location7 = ['97002', '97137', '97071', '97032'];
var location8 = ['97114', '97127', '97115', '97132', '97111', '97148', '97128'];
var location9 = ['97219', '97035', '97034', '97068', '97062', '97070', '97223', '97224', '97140'];
var location10 = ['97204', '97205', '97209', '97201', '97210', '97221', '97239', '97231', '97229'];
var location11 = ['98671', '98607', '98675', '98604', '98606', '98682', '98684', '98683', '98662'];

$('#zipcodeSearch').submit(function(e) {
  e.preventDefault();

  var root = location.protocol + '//' + location.host;
  var searchedZip = $('#zip-code').val();
  if (jQuery.inArray(searchedZip, location1) > -1) {
    window.location.href = root + '/location1/';
  } else if (jQuery.inArray(searchedZip, location2) > -1) {
    window.location.href = root + '/location2/';
  } else if (jQuery.inArray(searchedZip, location3) > -1) {
    window.location.href = root + '/location3/';
  } else if (jQuery.inArray(searchedZip, location4) > -1) {
    window.location.href = root + '/location4/';
  } else if (jQuery.inArray(searchedZip, location5) > -1) {
    window.location.href = root + '/location5/';
  } else if (jQuery.inArray(searchedZip, location6) > -1) {
    window.location.href = root + '/location6/';
  } else if (jQuery.inArray(searchedZip, location7) > -1) {
    window.location.href = root + '/location7/';
  } else if (jQuery.inArray(searchedZip, location8) > -1) {
    window.location.href = root + '/location8/';
  } else if (jQuery.inArray(searchedZip, location9) > -1) {
    window.location.href = root + '/location9/';
  } else if (jQuery.inArray(searchedZip, location10) > -1) {
    window.location.href = root + '/location10/';
  } else if (jQuery.inArray(searchedZip, location11) > -1) {
    window.location.href = root + '/location11/';
  } else {
    window.location.href = root + '/no-location/';
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="reg" onSubmit="return formValidation();">
  <p>Zip Code:
    <input type="text" id="zipcodeSearch" pattern="\d{5}" maxlength="5" name="zip" required="required" />
  </p>
  <input type="submit" id="submitbutton" name="submitbutton" value="Submit" />
  <div id="msg"></div>
</form>

Answer 1

Use an object to map from zip codes to locations.

And the submit handler needs to be attached to the form, not the text input field. id="zipcodeSearch" should be in the <form> tag, while the input should have id="zip-code".

var zipLocations = {
  '97049': 'location1',
  '97067': 'location1',
  '97011': 'location1',
  '97013': 'location2',
  //...
  '98662': 'location11'
}

$('#zipcodeSearch').submit(function(e) {
  e.preventDefault();
  var searchedZip = $('#zip-code').val();
  let destination = zipLocations[searchedZip] ?? 'no-location';
  window.location.href = `${location.protocol}//${location.host}/${destination}/`;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="reg" id="zipcodeSearch" onSubmit="return formValidation();">
  <p>Zip Code:
    <input type="text" id="zip-code" pattern="\d{5}" maxlength="5" name="zip" required="required" />
  </p>
  <input type="submit" id="submitbutton" name="submitbutton" value="Submit" />
  <div id="msg"></div>
</form>