Show message on button click and on keyboard "enter"

Question

I am working on a script and made it to function; however, I can't figure out how to make the @giobianchi's code work when the user hits "enter" on the keyboard. I assume we'd need to add another event listener with "keypress" or similar. I'd need the messages to show up on either enter or click.

The code is essentially from this thread. Thanks to the helpers there! I'm just struggling to find a solution that would work with this setup. Unless there's a better way to achieve the same thing?

Would greatly appreciate some guidance!

<!DOCTYPE html>
<html>
    <body>
        <input type="text" id="zipCode" placeholder="Enter ZIP code" />
        <button id="checkButton">Check</button>
        <div id="msg"></div>
        <script>
            var button = document.getElementById("checkButton");
            
            function checkIfAvailable(zip) {
                let zones = ["60004", "60005", "60006"]
                return (zones.indexOf(zip) >= 0);
            }
            
            button.addEventListener("click", function validateZip() {
                let zip = document.getElementById("zipCode").value;
                let msg = "";
                if (checkIfAvailable(zip)) {
                    msg = "Service is available your area!";
                } else {
                    msg = "Sorry, we do not service your area yet.";
                }
                document.getElementById("msg").innerHTML = msg;
            });

                     
            
        </script>
    </body>
</html>

I tried adding a second event listener with "keyup" to no avail.

<html>
    <body>
        <input type="text" id="zipCode" placeholder="Enter ZIP code" />
        <button id="checkButton">Check</button>
        <div id="msg"></div>
        <script>
            var button = document.getElementById("checkButton");
            
            function checkIfAvailable(zip) {
                let zones = ["60004", "60005", "60006"]
                return (zones.indexOf(zip) >= 0);
            }
            
            button.addEventListener("click", function validateZip() {
                let zip = document.getElementById("zipCode").value;
                let msg = "";
                if (checkIfAvailable(zip)) {
                    msg = "Service is available your area!";
                } else {
                    msg = "Sorry, we do not service your area yet.";
                }
                document.getElementById("msg").innerHTML = msg;
            });
                button.addEventListener("keyup", function validateZip() {
                    let zip = document.getElementById("zipCode").value;
                    let msg = "";
                    if (checkIfAvailable(zip)) {
                    msg = "Service is available your area!";
                } else {
                    msg = "Sorry, we do not service your area yet.";
                }
                document.getElementById("msg").innerHTML = msg;
            });
  
        </script>
    </body>
</html>

Thanks! That helped, but now after hitting enter, the whole page reloads, and "/?" appears after the URL. What could be causing this? — Sics Arts, Jun 27 '23 at 06:31
to prevent page reloading, I think, you need to call `preventDefault()` inside your `validateZip(e)` function. Refer to this link https://stackoverflow.com/a/49056105/10811003 for more deets — Khairani F, Jun 28 '23 at 14:53

score 0 · Accepted Answer · answered Jun 27 '23 at 06:00

var button = document.getElementById("checkButton");
      var input = document.getElementById("zipCode");
      
      function checkIfAvailable(zip) {
        let zones = ["60004", "60005", "60006"];
        return zones.includes(zip);
      }
      
      function validateZip() {
        let zip = input.value;
        let msg = "";
        if (checkIfAvailable(zip)) {
          msg = "Service is available in your area!";
        } else {
          msg = "Sorry, we do not service your area yet.";
        }
        document.getElementById("msg").innerHTML = msg;
      }
      
      button.addEventListener("click", validateZip);
      input.addEventListener("keyup", function (event) {
        if (event.key === "Enter") {
          validateZip();
        }
      });

This worked like a charm! Thank you so much! It subtly rewrites my original approach; I would not have figured this out on my own. Grateful for your help, Asmita. — Sics Arts, Jun 27 '23 at 21:48

Show message on button click and on keyboard "enter"

1 Answers1