JavaScript Form Customization for Squarespace Site

[SarahB]

Hi there,

I had a client ask me to make the phone section of a contact survey automatically tab over after someone has typed in three digits, like 123 (auto tab) 456 (auto tab) 4567.

I am familiar with the basics of HTML/CSS but don't have any idea how to even begin implementing this edit for her. The site is hosted on Squarespace, and it's currently just under a personal plan so I'd prefer to use HTML & CSS so I don't have to upgrade to the buisness plan to inject java... but I'm fairly certain that's not possible.

Site link: https://www.agoadoassociates.com/

 

[ivan.moony]

Hi 🙂

HTML attributes accept javascript code. Thus, if you can set up attributes, you may get along with this - I would suggest setting up maxlength and onkeypress attributes.

<input id="i0" maxlength="3" onkeypress="if (document.getElementById('i0').value.length == 3) document.getElementById('i1').focus();"/>
<input id="i1" maxlength="3" onkeypress="if (document.getElementById('i1').value.length == 3) document.getElementById('i2').focus();"/>
<input id="i2" maxlength="4" onkeypress="if (document.getElementById('i2').value.length == 4) document.getElementById('i3').focus();"/>
<input id="i3" ... />

Although, they may disable this kind of tweak too. Let us know if this worked.

 

[Malcolm]

Hello @SarahB, Welcome to Code Forum!

Have you tried applying the solution that @ivan.moony suggested?

I have also found this:

Give your inputs a class that is the same so in this example "test"

<form>
    <input class="test" type="text" maxlength="3" />
    <input class="test" type="text" maxlength="3" />
    <input class="test" type="text" maxlength="4" />
</form>

Now using JavaScript make sure that you are using the jQuery framework or this won't work.

$(".test").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.test').focus();
    }
});

Source: https://stackoverflow.com/a/23888632/10194636

 

[SarahB]

Hi 🙂

HTML attributes accept javascript code. Thus, if you can set up attributes, you may get along with this - I would suggest setting up maxlength and onkeypress attributes.

<input id="i0" maxlength="3" onkeypress="if (document.getElementById('i0').value.length == 3) document.getElementById('i1').focus();"/>
<input id="i1" maxlength="3" onkeypress="if (document.getElementById('i1').value.length == 3) document.getElementById('i2').focus();"/>
<input id="i2" maxlength="4" onkeypress="if (document.getElementById('i2').value.length == 4) document.getElementById('i3').focus();"/>
<input id="i3" ... />

Although, they may disable this kind of tweak too. Let us know if this worked.

It seems the java isn't working without me bumping up to a business membership. Really frustrating that Squarespace limits code languages like that. Thank you so much for your help though!!

 

[Malcolm]

It seems the java isn't working without me bumping up to a business membership. Really frustrating that Squarespace limits code languages like that. Thank you so much for your help though!!

That's so frustrating! Let us know if you need any more help. Hope to see you around!

 

[SarahB]

Got the javascript to work with the upgraded membership using @ivan.moony's code! Unfortunately now I have a new problem where it tabs over but doesn't record the digit pressed.

So if I was putting in my phone number and typed (123) 456 7891, it would record as 123 567 91

I built it on a test page if that's clearer than me describing it
https://www.agoadoassociates.com/test-page

And this is the code I used:

<input type="text" id="p1" name="phone" placeholder="(###)" maxlength="3" onkeypress="if (document.getElementById('p1').value.length == 3) document.getElementById('p2').focus();"/>
<input type="text" id= "p2" name="phone" placeholder="###" maxlength="3" onkeypress="if (document.getElementById('p2').value.length == 3) document.getElementById('p3').focus();">
<input type="text" id= "p3" name="phone" placeholder="####" >

Is there a way to have it tab over and also record the key pressed in the next field?

Also truly thank you guys so much!! I've been getting by for far too long only knowing HTML/CSS so this is a big sign that I just need to sit down and properly learn java.

 

[SarahB]

Nevermind, switched from "onkeypress" to "onkeyup" and that seemed to fix the problem. Thank you both!

 

[Malcolm]

Nevermind, switched from "onkeypress" to "onkeyup" and that seemed to fix the problem. Thank you both!

You’re welcome! Glad you figured it out, can you provide us with the solution and Mark it as the solution?