• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Form Customization for Squarespace Site

SarahB

New Coder
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/
 
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.

Code:
<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

Administrator
Administrator
Verified
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"
HTML:
<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.
JavaScript:
$(".test").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.test').focus();
    }
});

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

SarahB

New Coder
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.

Code:
<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

Administrator
Administrator
Verified
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

New Coder
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:
Code:
<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.
 
Top Bottom