I am creating a site that requires a very small postcode checker. I have approx 8 postcode prefix's, HX, HD, BD, LS etc in an array. I also have a simple input field and submit btn. When the user types in a postcode for example HX5 9DU I want Jquery to check the array, if there is match for the first 2/3 letters I want a div to fade in displaying a message.
How would I do this? Many thanks in advance.
Here's one way to do it:
HTML:
<div id="message">some message</div>
<input type="text" id="myInput" />
jQuery:
$(function() { // Wrap the code such that it will run after document loads
$("#message").hide(); // First hide the message
var prefix = ['HX', 'HD', 'BD', 'LS']; // Create your array of prefixes
$('#myInput').keyup(function(e) { // Trigger an event handler on each 'keyup'
var value = $(this).val(); // Grab the current value of the input
// Store first two characters in a variable, and convert to upper case
var firstTwo = value.substr(0,2).toUpperCase();
// Check that the length of the input is greater than one,
// and that the firstTwo characters are in the prefix array
if(value.length > 1 && ($.inArray(firstTwo, prefix) >= 0)) {
// If so, find the hidden element with ID "message" and fade it in.
$("#message:hidden").fadeIn();
}
});
});
Some related jQuery docs:
.hide() http://api.jquery.com/hide/
$.inArray() http://api.jquery.com/jQuery.inArray/
.fadeIn() http://api.jquery.com/fadein/
.keyup() http://api.jquery.com/keyup/
.val() http://api.jquery.com/val/
EDIT:
When running jQuery code, it is usually best to have your code run after the document has loaded. You can do this a couple different ways.
$(document).ready(function() {
// My jQuery code
});
or
$(function() {
// My jQuery code
});
The two will accomplish the same thing.
I updated my answer to include the second version.
BONUS:
This version will update the input with the upper case version if the user types lower case characters for the first two characters.
EDIT: Also, it shows a fail message if a match in the array is not found.
$(function() {
$("#message").hide();
$("#fail").hide();
var prefix = ['HX', 'HD', 'BD', 'LS']
$('#myInput').keyup(function(e) {
var value = $(this).val();
var firstTwo = value.substr(0,2);
var firstTwoUpper = firstTwo.toUpperCase();
if(firstTwo != firstTwoUpper) {
$(this).val( value.replace(/^\w\w/, firstTwoUpper) );
}
if(value.length > 1) {
if($.inArray(firstTwoUpper, prefix) >= 0) {
$("#fail").hide();
$("#message:hidden").fadeIn();
} else {
$("#message").hide();
$("#fail:hidden").fadeIn();
}
} else {
$("#message").hide();
$("#fail").hide();
}
});
});
firstTwo to upper case. var firstTwo = value.substr(0,2).toUpperCase(); Should take care of you. I updated the jsFiddle link too.I guess it would be best if you involve some serverside actors to this episode.
Doing something like:
$.getJSON('/CheckPrefix', { query = $('#prefixInpunt').val() }, function(responseMsg) {
$('#messageDiv').show().html(responseMsg);
})
You can store all your codes in a db, then just query the db with the param you get in the json call and craft the message on your server and send it to the UI.
