Formatting SearchForm Number as Phone Numbers w/ Hyphens

[skyflare1]

I am new to this, so please forgive me initial ignorance. I have a Tabular Report DataPage that uses Phone Numbers as the Search Form. The phone numbers are entered in via a CSV sheet in the format 555-555-5555. Some of the clients using this are not realizing they need to add the hyphens manually when searching using the Search Form, leading to confusion.

Is there a way to code it so the hyphens are automatically inserted when they search the DataPage? Thank you!

[MayMusic]

Here is a good example. Your code can be changed to 

 

<SCRIPT LANGUAGE="JavaScript">
function f_a(v_id)
{
return document.getElementById(v_id);
}
f_a('Value1_1').maxLength = 12;
f_a('Value1_1').onkeyup = function(v_e)
{
v_e = v_e || window.event;
if (v_e.keyCode >= 65 && v_e.keyCode <= 90){
this.value = this.value.substr(0, this.value.length - 1);
return false;
}else if (v_e.keyCode >= 37 && v_e.keyCode <= 40){
return true;
}
var v_value =(this.value.replace(/[^\d]/g, ''));
if (v_value.length==7) {
this.value = (v_value.substring(0,3) + "-" + v_value.substring(3,7));}
else if(v_value.length==10){
this.value = (v_value.substring(0,3)+"-"+ v_value.substring(3,6) + "-" + v_value.substring(6,10));
};
}
</SCRIPT>

This is if your phone field is the first search value on your search page. Please this in the footer after you click on source. 

[skyflare1]

Thank you. I inserted this into the footer and it doesn't seem to be having any effect.

Could it be because the clients have to log in and then use the Search Form? [I could PM you the link to the form if that works with test login info.]

[BaySunshine]

Hi @skyflare1,

This code assumes that the phone field in your table have values with a hyphen in them. And regarding login, code will work on the search form whether or not you have a login on your form.

I hope that helps.

[skyflare1]

On 1/25/2019 at 7:07 PM, BaySunshine said:

Hi @skyflare1,

This code assumes that the phone field in your table have values with a hyphen in them. And regarding login, code will work on the search form whether or not you have a login on your form.

I hope that helps.

Thank you! I figured out that the Table DataType for that column is set to Text (255), not Number. Unfortunately, if I try to switch it out, it says I will lose the data already entered. 

[skyflare1]

I have been working on this more. Here is the status, again, help would be greatly appreciated.

The way the DataPage is set up is the client logs in. After this, they see a Search Form asking for the phone number. The hyphens are NOT being automatically inserted and must be inserted manually. 

However, once you have searched, the results populate below the Search Form. After this, if you search again, the hyphens ARE being automatically inserted. So the code is working, partially.

Note: Search Form is marked as Required.

Any ideas? Thank you!

 

 

[skyflare1]

I hate to bump this but am running into a dead end on this fix. Any ideas? 

[skyflare1]

Update - Issue fixed!

I had inserted the code into the footer of "Configure Results Page Fields" but not the "Configure Search Fields" footer. Problem solved and it is now working beautifully. 

[Kurumi]

Hi All - In relation to Caspio's new feature of Worldwide SMS Notifications, if you would like your input phone number fields to be automatically formatted - you can use the International Telephone Input plugin. This JavaScript plugin is used for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder, and provides formatting/validation methods. To know more of the customization, you can check this link: https://github.com/jackocnr/intl-tel-input

Here's a sample result in DataPage:

After submission in table:

Related articles:

https://howto.caspio.com/notifications/sms-notifications/configuring-the-sms-enabled-countries/
https://howto.caspio.com/release-notes/caspio-32-0/

Hope it helps!

[PotatoMato]

Just to add, Caspio has released a new howto article regarding this: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/enhancing-phone-number-fields-with-formatting-and-validation/