Jump to content

Formatting SearchForm Number as Phone Numbers w/ Hyphens


Recommended Posts

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!

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 2 weeks later...

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!

 

 

Link to comment
Share on other sites

  • 1 month later...
  • 4 weeks later...
  • 3 years later...

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:

image.png

After submission in table:

image.png

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!

Link to comment
Share on other sites

  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...