javascript masked input textbox

I saw this fiddle:   FIDDLE

On this fiddle, when you select a country from the drop down, it applies a different masking to the postal_code input text box.

So when you select USA it applies this to the textbox: $(".postal_code").mask("99999");
when you select Canada it applies this to the text box:  $(".postal_code").mask("a9a-9a9");

I'm transferring this fiddle to a regular html page.

This is my code so far:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Masked Input Sample</title>
    <script src="http://code.jquery.com/jquery-1.4.3.js" type="text/javascript"></script>
    <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        jQuery(function ($) {
            $(".phone").mask("(999)-999-9999");
            $(".zip").mask("99999?-9999");
        });

        $('#country').change(function () {
            //alert($('#country option:selected').val());
            if ($('#country option:selected').val() == 'US') {
                $(".postal_code").unmask("")
                $(".postal_code").mask("99999");
                //alert(' yea ');
            } else {
                $(".postal_code").mask("a9a-9a9");
            }
        });

    </script>

</head>
<body>
    <div id="demo">
        
        Phone: <input class="phone"/><br/>
        Zip: <input class="zip"/>
        
        <select id="country" name="country" class="country">
            <option selected="selected" value="0"></option>
            <option value="CA">Canada</option>
            <option value="US">United States</option>
        </select>
        
        <input type="text" class="postal_code" name="postal_code" />
        
    </div>

</body>
</html>

Open in new window



When I run the page, the masking on the phone and zip textboxes works fine but the masking on the postal_code textbox is not working.

Anyone know what I'm doing wrong?  How can I fix the masking on the postal_code textbox ?
It should work just like the fiddle mentioned above.
LVL 1
maqskywalkerAsked:
Who is Participating?
 
Rainer JeschorCommented:
Hi,
you simply have to wrap your change function into a document.ready event.

Your Javascript code is running BEFORE the HTML Dom elements are created, therefore there is no event registered :-)

		$(document).ready(function() {
          $('#country').change(function () {
            if ($('#country option:selected').val() == 'US') {
				$(".postal_code").unmask("")
                $(".postal_code").mask("99999");
                //alert(' yea ');
            } else {
                $(".postal_code").mask("a9a-9a9");
            }
        });
		});

Open in new window

Just replace the above part.
HTH
Rainer
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.