You are viewing limited content. For full access, please sign in.

Question

Question

Javascript formating phone number

asked on March 6, 2017

Hi,

I have a question regarding formatting for phone number in a field.

It's a table & the issue is that I want to restrict the number of digits entered in the phone number based on country, which is from another field.

After that the number entered should be formatted in way corresponding to country.

 

The Field id of phone is: "input[id^=Field14]"

The Field id of country is: "input[id^=Field82]"  (this will go in if & else if loop, that I can manage)

Based on field 82 if the country is CH, the format will be +41 00 000 00 0

If field 82 is DE, the format will be +49 000 00 00 000

 

The user will only give the numbers & not the country code or leading 0's, so if the country is CH the field should only accept 8 characters, if the country is DE it should accept 10 characters.

any help is highly appreciated!

Regards,

Sahil

0 0

Answer

SELECTED ANSWER
replied on March 6, 2017

When you're checking for Switzerland or Germany your selector is a generic "give me the value for a field with an ID starting with Field82", when you probably want to limit that to the given row, like you do with the others ($(this).parents("tr").find("[....). If you don't narrow it down, I expect jQuery to just grab the first match it finds; in this case, it's in the first row. Does that make sense?

1 0

Replies

replied on March 6, 2017

I guess I found it:

//Mobile Format
 	$("input[id^=Field14]").on('change',function(i, text) {
      	if ($('[id^=Field82]').val() == "Switzerland") {
			var text = $(this).parents("tr").find("input[id^=Field14]").val();
      	 	var text = text.replace(/(\d{2})(\d{3})(\d{2})(\d{2})/, "+41" + " "+ "$1 $2 $3 $4");
            $(this).parents("tr").find("input[id^=Field14]").val(text);
		}
         
      	else if ($('[id^=Field82]').val() == "Germany") {
			var text = $(this).parents("tr").find("input[id^=Field14]").val();
      	 	var text = text.replace(/(\d{3})(\d{2})(\d{2})(\d{3})/, "+49" + " "+ "$1 $2 $3 $4");
            $(this).parents("tr").find("input[id^=Field14]").val(text);
		}
         alert('mobile');
      
    });

 

0 0
replied on March 6, 2017

I guess i still need some help...

The code works fine, however the issue is it sticks to the value of country in the first row, so even if in the second row the country is changed, it still formats as per the first row value...

 

The complete code is attached:

$(document).ready(function() {

//Initial binding
  RebindRowAction();

//After row is added
  $(".NewUser").on("change", function () {				
    RebindRowAction();    
  });
  
  //Function that actually does the magic of concatenating two fields within the same row
  function RebindRowAction(){	
      $('.short').change(function(){
      var x = $(this).parents("tr").find("input[id^=Field12]").val();
      var y = $(this).parents("tr").find("input[id^=Field11]").val();
      var z = (x+" "+ y);      
      $(this).parents("tr").find("input[id^=Field10]").val(z);
      
      //Email Field 15 
        var x = $(this).parents("tr").find("input[id^=Field88]").val();
      	var y = $(this).parents("tr").find("input[id^=Field89]").val();
  		var mail = (x+"."+ y+'@test.com');
  		var mail = mail.replace(/\s+/g, '');
  		$(this).parents("tr").find("input[id^=Field15]").val(mail);
        
      //Capitalize First Name
      	var text = $(this).parents("tr").find("input[id^=Field12]").val();
        var text = text.replace(/^.|\s.|-./g, function (txt) { return txt.toUpperCase(); });
      	$(this).parents("tr").find("input[id^=Field12]").val(text);
        
        //Capitalize Last Name
      	var text = $(this).parents("tr").find("input[id^=Field11]").val();
        var text = text.replace(/^.|\s.|-./g, function (txt) { return txt.toUpperCase(); });
      	$(this).parents("tr").find("input[id^=Field11]").val(text)
     
        
        
     });
    
    
  
    //Mobile Format for Swiss & Germany
 		$("input[id^=Field14]").on('change blur',function(i, text) {
            if ($('[id^=Field82]').val() == "Switzerland") {
			var text = $(this).parents("tr").find("input[id^=Field14]").val();
      	 	var text = text.replace(/(\d{2})(\d{3})(\d{2})(\d{2})/, "+41" + " "+ "$1 $2 $3 $4");
            $(this).parents("tr").find("input[id^=Field14]").val(text);
		}
         
      	else if ($('[id^=Field82]').val() == "Germany") {
			var text = $(this).parents("tr").find("input[id^=Field14]").val();
      	 	var text = text.replace(/(\d{3})(\d{2})(\d{2})(\d{3})/, "+49" + " "+ "$1 $2 $3 $4");
            $(this).parents("tr").find("input[id^=Field14]").val(text);
		}
               
    });
      	
    //Office Phone Format for Swiss & Germany
 		$("input[id^=Field63]").on('change blur',function(i, text) {
      	if ($('[id^=Field82]').val() == "Switzerland") {
			var text = $(this).parents("tr").find("input[id^=Field63]").val();
      	 	var text = text.replace(/(\d{2})(\d{3})(\d{2})(\d{2})/, "+41" + " "+ "$1 $2 $3 $4");
           	$(this).parents("tr").find("input[id^=Field63]").val(text);
          
		}
         
      	else if ($('[id^=Field82]').val() == "Germany") {
			var text = $(this).parents("tr").find("input[id^=Field63]").val();
      	 	var text = text.replace(/(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/, "+49" + " "+ "$1 $2 $3 $4 $5");
            $(this).parents("tr").find("input[id^=Field63]").val(text);
		}
 
  });      
    //Select Zip, Country, Language, Street based on City selection
       
       $("select[id^=Field85]").on('change blur', function(){
       	 if ($(this).val() == "Lugano") {
			$(this).parents("tr").find("[id^=Field84]").val("3011");
			$(this).parents("tr").find("[id^=Field82]").val("Switzerland");
					
		}
        
         else if ($(this).val() == "Bern") {
    		$(this).parents("tr").find("[id^=Field84]").val("6900");
			$(this).parents("tr").find("[id^=Field82]").val("Switzerland");
			
       	}
      
  		  else if ($(this).val() == "Zürich"){
    		$(this).parents("tr").find("[id^=Field84]").val("8001");
			$(this).parents("tr").find("[id^=Field82]").val("Switzerland");
			
    	}
          else if ($(this).val() == "Frankfurt"){
    		$(this).parents("tr").find("[id^=Field84]").val("60311");
			$(this).parents("tr").find("[id^=Field82]").val("Germany");
			
    	}
          else if ($(this).val() == "Genève"){
    		$(this).parents("tr").find("[id^=Field84]").val("1204");
			$(this).parents("tr").find("[id^=Field82]").val("Switzerland");
			
    	}
  		  else if($(this).val() == "Berlin"){
    		$(this).parents("tr").find("[id^=Field84]").val("10178");
			$(this).parents("tr").find("[id^=Field82]").val("Germany");
			
    	}
          });  
     
    //RebindRowAction ends here
    }
  
});

 

0 0
replied on March 6, 2017
0 0
replied on March 6, 2017

Blake,

Thanks.

The issue is the user doesn't give the country code, I add it based on the value from another field.

It works fine, but only for the first row, in the second row it still takes the value from the first country...

 

0 0
SELECTED ANSWER
replied on March 6, 2017

When you're checking for Switzerland or Germany your selector is a generic "give me the value for a field with an ID starting with Field82", when you probably want to limit that to the given row, like you do with the others ($(this).parents("tr").find("[....). If you don't narrow it down, I expect jQuery to just grab the first match it finds; in this case, it's in the first row. Does that make sense?

1 0
replied on March 6, 2017

Andrew,

I guess I have tried so many times that I'm blind... :(

Can you please write syntax & on which line (my guess you talking about line 60 & 67)

Thanks,

S

0 0
replied on March 6, 2017

is this the correct syntax: if  ($(this).parents("tr").find("[id^=Field82]").val()="Switzerland"){

0 0
replied on March 6, 2017

got it!!!

if  ($(this).parents("tr").find("[id^=Field82]").val()=="Switzerland"){

 

Thanks so much!!!

0 0
replied on March 6, 2017

Nice work!!

0 0
replied on March 6, 2017

thanks to you, I'm learning a lot!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.