[Resolved] telephone cred field on user form (Create Free Seller Account) stopped working..

[Author]

Posts

[michaelS-13]

I am trying to: submit a new seller registration form and submit a telephone number field

Link to a page where the issue can be seen:

I expected to see:

Instead, I got:

[Shane]

HI Michael,

Thank you for getting in touch.

Could you provide an account where I can test this our or a page where I can see this issue ?

With the limited information that was provided i'm unable to do anything at the moment.

Looking forward to hearing from you.

Thanks,
Shane

[Shane]

Hi Michael,

Thank you for the credentials, however i'm not able to log in as i'm getting an invalid username message.

Could you confirm on your end that the credentials work ?

Thanks,
Shane

[michaelS-13]

Credentials Removed

[Shane]

Hi Michael,

The issue is being caused by the JS code here.

document.getElementById('telephone').addEventListener('input', function (e) {
  var x = e.target.value.replace(/D/g, '').match(/(d{0,3})(d{0,3})(d{0,4})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});

Could you explain to me what this code is suppose to do ? is it suppose to format the telephone numbers?

Thanks,
Shane

[michaelS-13]

Yes. Uses regex and a javascript event listener on the form field id to reformat phone number the user sees as they are typing in the number, 4444444444 to look like:

(444) 444-4444 as they are typing.

This was always worked, and for unknown reasons, stopped.

Don't know if they are related but in our listing form, everything worked too, except now if the registered user clicks to upload an image, they are taken to the WordPress backend image uploader vs previously the upload was entirely from the front-end.
Thanks again.

[Shane]

Hi Michael,

Are you currently editing the form?

It seems i'm not able to edit the form as it says you are currently editing.

Please let me know.

Thanks,
Shane

[Shane]

Hi Michael,

I've fixed the code. Not sure how this was working before but this is the correct code.

document.getElementsByName('wpcf-telephone')[0].addEventListener('input', function (e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});

Where you get the element by the name because your code was targeting the ID of the label but we needed to get the actual field.

Please let me know if this helps.
Thanks,
Shane

[michaelS-13]

My issue is resolved now. Thank you!