Form submit to specific url according to data inserted

November 9, 2021

I have a form that is simply a input with a zip code and a submit button.
I need some help on submiting the form according to the data inserted.
For example if someone inserts a number between 1000-000 and 2999-999 it will be forward to landing1.html, if the input is between 3000-000 to 4000-999 it will forward to landing2.html and so on.

This is a draft of my code my code for better understanding

$(document).ready(function(){
        $(".postal-code").inputmask("9999-999",{ "placeholder": "0" });
        $(".postal-code").inputmask("9999-999",{ "onincomplete": function(){ alert('Insere um Código Postal válido'); } });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.min.js"></script>
<div id="form-cp">
<form method="get" action="" onsubmit="" class="needs-validation">
<input type="text" name="cp" value="" size="8" maxlength="8" minlength="8" class="postal-code form-control-lg" aria-invalid="false" placeholder="0000-000" required>
<button type="submit" class="btn btn-primary">Send Data</button>
</form>
</div>

Hope someone can help me.
Many thanks!

>Solution :

Like this

We can make it more complex if you have many sets of post codes

$(function() {
  $(".postal-code").inputmask("9999-999", {
    "placeholder": "0"
  });
  $(".postal-code").inputmask("9999-999", {
    "onincomplete": function() {
      alert('Insere um Código Postal válido');
    }
  });
  $(".needs-validation").on("submit",function() {
    const cp = this.cp.value;
    if (cp >= "1000-000" && cp <= "2999-999") this.action = "landing1.html";
    else if (cp >= "3000-000" && cp <= "4000-999") this.action = "landing2.html";
    // else this.action = "outofrange.html";
  })
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.min.js"></script>
<div id="form-cp">
  <form method="get" action="" onsubmit="" class="needs-validation">
    <input type="text" name="cp" value="" size="8" maxlength="8" minlength="8" class="postal-code form-control-lg" aria-invalid="false" placeholder="0000-000" required>
    <button type="submit" class="btn btn-primary">Send Data</button>
  </form>
</div>