samedi 13 juin 2020

I'm Using JQuery to check if a inputed value (a postcode) matches, but need to display some text if it doesn't

I have a JQuery script to check if a value (a postcode) typed into an input field matches any of the values I have. At the moment when a value is typed into the input field, it changes the visibility of a div (which has an ID of the particular postcode) from "none" to "inline-block" if a value matches (as shown in the code below), so if I type 3138 it changes the visibility of a p tag with an id of "3138" from "display: none" to "display: inline-block"

What I can't work out: I would like to show a message if a matching value isn't found. At the moment if a value that doesn't match is inputted then no message is displayed, which tells me I need a sort of "else" statement.

I tried Googling if/else statements but I'm not even sure if that's the right thing to be searching for...

<div class="postcode-checker"> 
  <div>
    <p>Enter your postcode and find out what day we deliver to your area: <input type="text" id="postcode" placeholder="Postcode..."></p>
    <p id="3138" style="display:none;" >
      Your Delivery Day is <strong>TUESDAY</strong>
    </p>
    <p id="3136" style="display:none;" >Your Delivery Day is <strong>FRIDAY</strong>
<p id="3136" style="display:none;" >Your Delivery Day is <strong>FRIDAY</strong>
  </p>
  </div>
</div>

<script>
    $(document).ready(function () {
      $("#postcode").keyup(function () {
          $("#3138").css("display", this.value == "3138" ? "inline-block" : "none"),
          $("#3136").css("display", this.value == "3136" ? "inline-block" : "none");

      });

    });
  </script>

I've also put together a codepen if that helps.... https://codepen.io/justbrown1980/pen/KKVMzWN

Aucun commentaire:

Enregistrer un commentaire