Trying to add a submit button and then it would display the "msg"

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>

CodePudding user response：

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.

CodePudding user response：

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>