• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 751
  • Last Modified:

Changing Mask Property

I have two radio buttons that dictate Domestic or International. When user clicks the radio button,
I want the textbox that contains PhoneNumber to change the mask. The onclick in the radio button calls
ChangePhone. When the masks change the textbox gets trailing spaces when you type a new phone number.

This is a weird behavior. I tired to setfocus, remove the text within the textbox. Can someone help
me solve this?
**Script JQuery
function ChangePhone() {

  var isIntl = $('#intlLocation').attr('checked') ? 1 : 0;

  $('#MainPhone').val("");

  if (isIntl == 1) {
     $("#MainPhone").mask("(99) 9999-9999");
  }
  else {
    $("#MainPhone").mask("(999) 999-9999");
  }
 }

**HTML
<asp:radiobutton id="domLocation" GroupName="AddrLoc" 
Height="20px" Text="Domestic Location" runat="server" 
onclick="ChangePhone();" Width="250px" />

<asp:radiobutton id="intlLocation" GroupName="AddrLoc" 
Height="20px" Text="International Location" runat="server"  
onclick="ChangePhone();" Width="250px"/>
		
															
<asp:textbox id="MainPhone" tabindex="14" runat="server" 
name="MainPhone" 
CssClass="textBoxStyle" maxlength="100"></asp:textbox></td>

Open in new window

0
DexSteve
Asked:
DexSteve
  • 5
  • 4
1 Solution
 
leakim971PluritechnicianCommented:
Put this in head section :
<script language="javascript" type="text/javascript">
    var AddrLoc = null;
    $(document).ready(function () {
        AddrLoc = $("#<%= domLocation.ClientID %>").attr("name");
        $(":radio[name='" + AddrLoc + "']").change(function () {
            $("#MainPhone").val("");
            if ($(":radio[name='" + AddrLoc + "']:checked").attr("id") == "<%= domLocation.ClientID %>") {
                $("#<%= MainPhone.ClientID %>").mask("(99) 9999-9999");
            }
            else {
                $("#MainPhone").val("");
                $("#<%= MainPhone.ClientID %>").mask("(999) 999-9999");
            }
        })
    })
</script>

Open in new window


Full test page :
<%@ Page Title="Page d'accueil" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication15._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.min.js"></script>
<script language="javascript" type="text/javascript">
    var AddrLoc = null;
    $(document).ready(function () {
        AddrLoc = $("#<%= domLocation.ClientID %>").attr("name");
        $(":radio[name='" + AddrLoc + "']").change(function () {
            $("#MainPhone").val("");
            if ($(":radio[name='" + AddrLoc + "']:checked").attr("id") == "<%= domLocation.ClientID %>") {
                $("#<%= MainPhone.ClientID %>").mask("(99) 9999-9999");
            }
            else {
                $("#MainPhone").val("");
                $("#<%= MainPhone.ClientID %>").mask("(999) 999-9999");
            }
        })
    })
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<table>
<tr>
<td>
    <asp:radiobutton id="domLocation" GroupName="AddrLoc" Height="20px" Text="Domestic Location" runat="server" onclick="ChangePhone();" Width="250px" />
    <asp:radiobutton id="intlLocation" GroupName="AddrLoc" Height="20px" Text="International Location" runat="server" onclick="ChangePhone();" Width="250px"/>
    <asp:textbox id="MainPhone" tabindex="14" runat="server" name="MainPhone" CssClass="textBoxStyle" maxlength="100"></asp:textbox>
</td>
</tr>
</table>
</asp:Content>

Open in new window

0
 
DexSteveAuthor Commented:
Unfornatly I cannot do code blocks <%, because the way the pages are being loaded.
0
 
leakim971PluritechnicianCommented:
It's not really a problem in this case...
Just remove the <%= .ClientID %> part everywhere
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
DexSteveAuthor Commented:
phone
Okay got rid if the codeblocks.
Same thing happens as before. If you look at the image, I get trailing spaces after I type a digit. Now it will only do this if you change the Radio button.

Now the only thing I did not do was use the asp:content tags.

0
 
leakim971PluritechnicianCommented:
0
 
DexSteveAuthor Commented:
Maybe something in my JQuery ... not sure ... I guess I will try to run debug and check trace points etc ...

If any more suggest let me know ...

Thanx

By the way what do you use for the flv file ... that is way cool ...
0
 
leakim971PluritechnicianCommented:
>By the way what do you use for the flv file ... that is way cool ...

You've a Screencast link below
0
 
leakim971PluritechnicianCommented:
>If any more suggest let me know ...

try the test page, if it work update you' jQuery version
0
 
DexSteveAuthor Commented:
I did get this to work, by unmask then mask with the new clause

grpEIN = $("#isEIN").attr("name");
            $(":radio[name='" + grpEIN + "']").change(function () {

                $("#EINNo").val("");
                $("#EINNo").unmask("");

                if ($(":radio[name='" + grpEIN + "']:checked").attr("id") == "isEIN") {
                    $("#EINNo").mask("99-9999999");
                }
                else if ($(":radio[name='" + grpEIN + "']:checked").attr("id") == "isSSN") {
                    $("#EINNo").mask("999-99-9999");
                }
                else if ($(":radio[name='" + grpEIN + "']:checked").attr("id") == "isDunn") {
                    $("#EINNo").mask("99-999-9999");
                }
            });
0
 
Amandeep Singh BhullarCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now