JSFiddle - React, Tailwind, and code Playground

by ryanbrill

HTML

<form action="javascript:alert('success.');" id="checkplz">
    <label for="plz">ZIP:</label>
    <input type="text" name="plz" id="plz" />
    <button id="submit" >Check!</button>
    <div id="output"></div>
</form>

JavaScript

$(document).ready(function(){
    var list = ['83512','83533'];
    $("#checkplz").submit(function() {
        var matched = false; // Set up variable to track if we find a match
        $(list).each(function() {
            // Inside the jQuery 'each' method, 'this' equals the current item in the iteration.
            if(this == $("#plz").val()) {
                matched = true; // set the 'matched' variable to true
                $("#output").append("<strong class='success'>success!</strong>").show();
                return; // Since we found a match, we can stop processing the array
            }
        });
        // Outside of the loop, only display no success if we didn't find any matches.
        if (!matched) {
            $("#output").text("no success!").show().fadeOut(10000);
        }
        
    });
});