Post by siptec » Thu Nov 14, 2019 6:32 am

How can you force the postalcode to only take numeric values for shipping address during checkout?
Last edited by siptec on Thu Nov 14, 2019 7:05 am, edited 1 time in total.

User avatar
New member

Posts

Joined
Mon Sep 17, 2012 11:32 pm

Post by siptec » Thu Nov 14, 2019 7:03 am

Ok, I figured this out and am posting the solution here.

In the shipping.tpl finding the input line below and adding onkeypress="return isNumberKey(event)" . I also applied this to the guest_shipping.tpl file.

Code: Select all

<input type="text" name="postcode"

Code: Select all

<input type="text" onkeypress="return isNumberKey(event)" name="postcode"

At the bottom of the template add the following script to define the function isNumberKey as a JavaScript function

Code: Select all

<script>
function isNumberKey(evt) {
	var charCode = (evt.which) ? evt.which : event.keyCode
	if (charCode > 31 && (charCode < 48 || charCode > 57)) {
		return false;
	} else {
		return true;
	}
}
</script>
Thanks to Joe Stenhouse for posting his solution at blog.arvixe.com

User avatar
New member

Posts

Joined
Mon Sep 17, 2012 11:32 pm

Post by letxobnav » Thu Nov 14, 2019 1:56 pm

<input type="number" name="postcode"

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


User avatar
Expert Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by Johnathan » Thu Nov 14, 2019 10:41 pm

I don't like using "number" type inputs because they show the little "stepper" on the right side of the input, so I was wondering if that could be removed. It looks like someone found a way to do it for Webkit browsers, so if you end up using a "number" field you can read about that here:

https://css-tricks.com/snippets/css/tur ... -spinners/

Image Image Image Image Image


User avatar
Administrator

Posts

Joined
Fri Dec 18, 2009 3:08 am


Post by letxobnav » Thu Nov 14, 2019 11:36 pm

true, it is not beautiful but I take standard functionality over js meddling any day.

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


User avatar
Expert Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by Johnathan » Fri Nov 15, 2019 12:28 am

It's actually just CSS, not javascript, so there's very little chance anything bad will happen. Other browsers will just ignore the CSS, so I don't any reason why it would hurt to add it (unless you like the "stepper", of course).

Image Image Image Image Image


User avatar
Administrator

Posts

Joined
Fri Dec 18, 2009 3:08 am


Post by letxobnav » Fri Nov 15, 2019 12:31 am

I know, I was refering to the original post js solution.

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


User avatar
Expert Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by siptec » Fri Nov 15, 2019 1:04 am

Unfortunately, using number in the type caused an issue with passing the information to the shipping calculator. By doing this server side, it didn't cause the issue and the shipping calculator functioned correctly.

Jonathan, wonder if the spinner was causing the pass through issue. It works with the java script so I'm good with the solution.

User avatar
New member

Posts

Joined
Mon Sep 17, 2012 11:32 pm

Post by Johnathan » Fri Nov 15, 2019 5:40 am

letxobnav wrote:
Fri Nov 15, 2019 12:31 am
I know, I was refering to the original post js solution.
Ah, got it. 👍

siptec, no worries --- doing it server-side is probably a better solution, but using "number" for the input type should also work in most situations. I just wanted to post the link I found since I'd never seen the CSS to do that before.

Image Image Image Image Image


User avatar
Administrator

Posts

Joined
Fri Dec 18, 2009 3:08 am

Who is online

Users browsing this forum: JessiesBoutique, pprmkr and 503 guests