CODEWITHSUNDEEP
jqueryhtml
seymour37
seymour37

Reputation: 33

jQuery Change input mask for phone depending on selected country

I want to change the input mask for "phone" depending on the country that the user selects. I am pretty sure that my problem exists in not having the jQuery code to change element ID in the correct syntax.

First am checking to see if contact is already on file and displaying data if found. When I find a contact with an international phone number the number displays as desired. Most of our contacts are from US so I select that code as initial display. The problem exists when a new contact registers from a country other than US (or international code"1"). Then the masking does not change to iphone.

 <html>
 <head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js">
 </script>
 <script src="jquery.js" type="text/javascript"></script>
 <script type="text/javascript" src= "../js/jquery.maskedinput.js"></script>
 <script>
 function show() 
 {
 var a = document.getElementById('country');
 var a = a.value.split(",")[1];
 document.getElementById("code").value= a+"+";
 if(a!=1)
jQuery(this).prev("phone").attr("id", "iphone");
 else
jQuery(this).prev("iphone").attr("id", "phone");    
 };
 </script>
 </head>
 <body>

 <p>Country:&nbsp;
<select id="country" name="country" onchange="show(this)">       
    <option value="United States,1" selected>United States</option><?php $code=1 ?>
    <option value="Sweden,37">Sweden</option>
 </p>

 <p>Phone:&nbsp;
 <?php echo '<input name="code"  id="code" size="1" type ="text" disabled="disabled" value="'.$code.'+"/>';
 if($code!=1)
 {
echo '<input name="phone"  id="iphone" type="text" value="'.$result1[phone].'"/>';
 }  
 else
 {
echo '<input name="phone" id="phone" type="text" value="'.$result1[phone].'"/>';
 }  
 ?>
 </p>
 <script>jQuery(function($)
 {
   $("#phone").mask("(999) 999-9999");
   $("#iphone").mask("99 99 99 99? 99");  
 }); 
 </script>

 </body>
 </html>

Upvotes: 3

Views: 8799

Answers (3)

Andrey
Andrey

Reputation: 11

I suppose you have a problem which I experienced with too. As a result I've developed a plugin which selects a mask of input which is matched to entered phone number more. Have a look at demo.

Upvotes: 1

seymour37
seymour37

Reputation: 33

Thanks to user1477388, I looked at what I was doing differently. Rather than attempting to change the id of the element, I really just wanted to change the mask. The select option is populated from a mySQL data table that contains country and code(dialing code)

 <select id="country" name="country" onchange="show(this)">
 <?php     
 $sql1="SELECT* FROM countries ORDER BY countryName";
 $query1= mysql_query ($sql1) or die("Couldn't execute check country query. ". mysql_error()); 
 while($row1=mysql_fetch_array($query1))
 {
  /* Option values are added by looping through the array */
 echo '<option value="'.$row1[countryName].','.$row1[code].'"\">'.$row1[countryName].'</option>';
 }
 echo "</select>";
 ?>

Then in the script the dialing code ($code) is determined by reading it - [var a = a.value.split(",")[1]; ] If dialing code = 1 format #phone is (999) 999-9999 else format #phone is 99 99 99 99 99

   <script>
   function show() 
   {
    var a = document.getElementById('country');
    var a = a.value.split(",")[1];
   document.getElementById("code").value= a+"+";
   $code=a;
   if(a!=1)
   { 
   $("#phone").mask("99 99 99 99? 99");}
   else
   {$("#phone").mask("(999) 999-9999");
   }
   };
   </script>

Upvotes: 0

user1477388
user1477388

Reputation: 21430

I believe you can just change the class when they select a country, then re-initialize your mask with the new class:

<select id="country" name="country" onchange="show(this)">       
    <option value=".unitedStates" selected>United States</option><?php $code=1 ?>
    <option value=".sweden">Sweden</option>

<input type="text" id="phoneNumber" />

JS:

$('#country').change(function(){
  $("select option:selected").each(function () {
    var className = $(this).val();
    $('#phoneNumber').removeClass();
    $('#phoneNumber').addClass(className);
    initMasks();
  });
});

function initMasks(){
  $('.unitedStates').mask("(999) 999-9999");
  $('.sweden').mask("99 99 99 99? 99");  
}

Upvotes: 0

Related Questions