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