asked on

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.

ASKER CERTIFIED SOLUTION

Rainer Jeschor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial