0

I am not sure what i am doing exactly, but have some code that is working at the moment. I want to have a whole bunch of zip codes and when someone enters their zip and clicks submit it will return a message. Instead of the message just displaying as you type. Any help is appreciated!

<!DOCTYPE html>
<html>
<body>

<h1 style="color:black; font-family: arial; font-size: 110%; ">Not sure if we deliver to your area?</h1>
<h2 style="color:black; font-family: arial; font-size: 90%; font-weight:40; ">Enter your zip code to find out.</h1>

<input type="text" id="zipCode" placeholder="ZIP code" onKeyUp="validateZip()"/>
<div id="msg" style="color:black; font-family: arial; font-size: 90%; font-weight:40; margin-top: 10px;"></div>
<script>

function checkIfAvailable(zip)
{
  let zones = ["55075","55118","55115"]
  return( zones.indexOf(zip) >= 0 )
}

function validateZip()
{
  let zip = document.getElementById("zipCode").value;
  let msg =""
  if(checkIfAvailable(zip))
    {
      msg="We deliver to your area!";
    }
   else
     {
       msg="Sorry, we do not deliver to your area.";
     }
    document.getElementById("msg").innerHTML = msg;
}






</script>

</body>
</html>
Kat Manor
  • 1
  • 1

2 Answers2

0

Your script is working as expected here, currently you're running validateZip every time a key is pressed, because it's on the onKeyUp attribute of your input element.

To run this function when the submit button is clicked, run the script on the "onClick" attribute of a button.

For example:

<input type="text" id="zipCode" placeholder="ZIP code" />
<div id="msg" style="color:black; font-family: arial; font-size: 90%; font-weight:40; margin-top: 10px;"></div>
<button onclick="validateZip()">Submit</button>

This way it only runs once, not every time you press a key.

Duncan Lutz
  • 126
  • 7
  • So cool! and so fast! Thank you soo much! I have another ask of you guys! If I want to have basically three return messages, how would i add that to the if else statement. One set of zip codes returns " We deliver to your area", another set of zips returns "We deliver to your area with an extra delivery fee" and the else is " sorry, we do not deliver to your area". I am sure it is simple, but would love some direction. Thank you! – Kat Manor Mar 31 '22 at 22:06
  • I've put together a little example for you. I create an array for delivery zone zip codes and fee delivery zip codes, and use Array.indexOf() to check whether the input value is contained in that array. If it's not contained in either array, we display the "sorry" message. Let me know if you have any trouble incorporating it. https://codepen.io/duncanlutz/pen/ZEvXvNV?editors=1111 – Duncan Lutz Apr 01 '22 at 02:20
  • Hi again! Thank you! I have another little edit. It is working great. now when someone wants to check a second zip code they would click the text input again. Is there a way to reset it so that while they are typing the new zip code it does not display the text for the previously searched zip? – Kat Manor Jun 29 '22 at 20:57
  • Okay so if I understand your question, when the user clears the input box and starts typing a new zip code you want the previous result text to be cleared? – Duncan Lutz Jun 30 '22 at 03:52
  • Hi Duncan, Yes, so that when the user clicks into the box to do a second zip, everything clears. – Kat Manor Jul 18 '22 at 18:16
0

So, just added a eventListener to a button

<!DOCTYPE html>
<html>
    <body>
        <h1 style="color:black; font-family: arial; font-size: 110%; ">Not sure if we deliver to your area?</h1>
        <h2 style="color:black; font-family: arial; font-size: 90%; font-weight:40; ">Enter your zip code to find out.</h2>
        <input type="text" id="zipCode" placeholder="ZIP code" />
        <button id="sendButton">Send</button>
        <div id="msg" style="color:black; font-family: arial; font-size: 90%; font-weight:40; margin-top: 10px;"></div>
        <script>
            var button = document.getElementById("sendButton");
            
            function checkIfAvailable(zip) {
                let zones = ["55075", "55118", "55115"]
                return (zones.indexOf(zip) >= 0);
            }
            
            button.addEventListener("click", function validateZip() {
                let zip = document.getElementById("zipCode").value;
                let msg = "";
                if (checkIfAvailable(zip)) {
                    msg = "We deliver to your area!";
                } else {
                    msg = "Sorry, we do not deliver to your area.";
                }
                document.getElementById("msg").innerHTML = msg;
            });
            
            
        </script>
    </body>
</html>
giobianchi
  • 1
  • 1
  • So cool! and so fast! Thank you soo much! I have another ask of you guys! If I want to have basically three return messages, how would i add that to the if else statement. One set of zip codes returns " We deliver to your area", another set of zips returns "We deliver to your area with an extra delivery fee" and the else is " sorry, we do not deliver to your area". I am sure it is simple, but would love some direction. Thank you! – Kat Manor Mar 31 '22 at 18:21