 A text box which limits characters, A limited character text box |
  |
| MissR |
 Feb 1 2016, 06:41 PM
Post
#1
|
|
Group: Members Posts: 6 Joined: 1-February 16 Member No.: 23,951  |
Hello, I wonder if anybody could assist? This is foreign land for me.
I need to embed some HTML code into one of those online website templates. I require it so a customer can type in the text they want to see personalised on the product that they buy. I have to limit the characters to 30. [This template does not offer any apps that really come near] Anyway I have come up with this: <div class=" product-addon product-addon-personalised-wording"> <p><h3 class="addon-name">Personalised Wording </h3> <p class="form-row form-row-wide addon-wrap-9531-bespoke-wording"> <input type="text" class="input-text addon addon-custom" data-price="" name="addon-9531-bespoke-wording[only-if-bespoke-wording-selected-above]" value="" maxlength="30"><small class="chars_remaining"> <P><span>30</span> characters remaining</small></p> <div class="clear"></div> </div> But the characters do not count down as you type the text in. I do not even know if this is going to work. But I really need to give it a shot. I have attached a screen shot of what the form looks like on the live website. Thank you so much in advance if any you are able to help. It really means a lot right now to be able to do this. Attached image(s) 
|
  |
 
|
| pandy |
Feb 1 2016, 07:07 PM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
To display the characters remaining you need some scripting. JavaScript is probably the best choice. Try some searches along this line or ask in the client side scripting forum.
https://www.google.com/search?q=javascript%...emaining%20form |
|
|
|
| MissR |
Feb 2 2016, 04:04 AM
Post
#3
|
|
Group: Members Posts: 6 Joined: 1-February 16 Member No.: 23,951 |
Thanks Pandy, much appreciated
I didn't realise it is Java that would probably be needed. It's a start but I really don't know how to bring it all together. |
|
|
|
| CharlesEF |
Feb 2 2016, 07:23 AM
Post
#4
|
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Here is a basic sample, extra work is needed to fit your needs. Copy and paste into a blank HTML document and test it out. If you have any questions, just ask. Oh, it's javascript, not java.
sample.html CODE <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Characters Remaining</title> <script type="text/javascript"> function countChars(elem) { var max_chars = elem.getAttribute("maxlength"); var cur_chars = elem.value.length; document.getElementById('rchars').innerHTML = max_chars - cur_chars; } </script> </head> <body> <span id="rchars"></span><br> <input type="text" id="pword"maxlength="30" onkeyup="countChars(this)"> </body> </html> This post has been edited by CharlesEF: Feb 2 2016, 07:33 AM |
|
|
|
| pandy |
Feb 2 2016, 10:31 AM
Post
#5
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
Just for the record, Java and JavaScript are both programming languages, but they aren't even remotely related. Back in the day when JavaScript was created Java was popular and it's said the naming of JavaScript was a marketing gimmick. Don't know if the latter is true, but it isn't unlikely. Anyhow, they are not the same but it's a common mistake to think they are.
 |
|
|
|
| Christian J |
Feb 2 2016, 10:50 AM
Post
#6
|
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
QUOTE(CharlesEF @ Feb 2 2016, 01:23 PM)  Here is a basic sample, extra work is needed to fit your needs. You might use the oninput event instead of (or in addition to) onkeypress, in case the user pastes text into the text field instead of typing. That said, maybe a user that pastes text doesn't need a countdown in the first place.  |
|
|
|
| CharlesEF |
Feb 2 2016, 11:39 AM
Post
#7
|
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
QUOTE(Christian J @ Feb 2 2016, 09:50 AM) QUOTE(CharlesEF @ Feb 2 2016, 01:23 PM) Here is a basic sample, extra work is needed to fit your needs. You might use the oninput event instead of (or in addition to) onkeypress, in case the user pastes text into the text field instead of typing. That said, maybe a user that pastes text doesn't need a countdown in the first place. Adding the oninput event is a good idea, but onkeypress will not work correctly because it will always be 1 character off. That is why onkeyup is needed. |
|
|
|
| Christian J |
Feb 2 2016, 12:46 PM
Post
#8
|
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
QUOTE(CharlesEF @ Feb 2 2016, 05:39 PM) onkeypress will not work correctly because it will always be 1 character off. That is why onkeyup is needed. Oops, I did mean onkeyup.  Another idea might be to add a warning if a user pastes a too long text, and doesn't notice that is has been truncated by the text field. |
|
|
|
| CharlesEF |
Feb 2 2016, 01:04 PM
Post
#9
|
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
QUOTE(Christian J @ Feb 2 2016, 11:46 AM) QUOTE(CharlesEF @ Feb 2 2016, 05:39 PM) onkeypress will not work correctly because it will always be 1 character off. That is why onkeyup is needed. Oops, I did mean onkeyup. Another idea might be to add a warning if a user pastes a too long text, and doesn't notice that is has been truncated by the text field. I will post another version with your suggestions included but I don't think any alert is needed. The maxlength attribute of the input element will limit the number of characters, so I don't think an alert would ever display anyway. |
|
|
|
| CharlesEF |
Feb 2 2016, 01:13 PM
Post
#10
|
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Here is another version that includes the oninput event, in case anyone pastes data in the field. I also added the onload event to set the character counter. It then counts down or up as needed.
CODE <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Characters Remaining</title> <script type="text/javascript"> function countChars(elem) { var max_chars = elem.getAttribute("maxlength"); var cur_chars = elem.value.length; document.getElementById('rchars').innerHTML = max_chars - cur_chars; } </script> </head> <body> Characters Remaining: <span id="rchars"></span><br> <input type="text" id="pword"maxlength="30" onkeyup="countChars(this)" oninput="countChars(this)"> <script type="text/javascript"> window.onload=function() { document.getElementById('rchars').innerHTML = document.getElementById('pword').getAttribute("maxlength"); } </script> </body> </html> This post has been edited by CharlesEF: Feb 2 2016, 01:15 PM |
|
|
|
| MissR |
Feb 2 2016, 06:17 PM
Post
#11
|
|
Group: Members Posts: 6 Joined: 1-February 16 Member No.: 23,951 |
@Charles, Christian & Pandy.
Thanks so much for your assistance. Charles - your last code is exactly what I need. I have embedded it into my website - the only thing is I am not sure where the text gets captured. I placed some dummy orders but it did not come up in the reporting. Andy - I really thought the two were the same. To think that they are poles apart too. Madness Without the risk of sounding cheesy - you are clever people. Thanks so much. |
|
|
|
| pandy |
Feb 2 2016, 06:44 PM
Post
#12
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
Reporting? Don't you want it on the page above the text field?
|
|
|
|
| pandy |
Feb 2 2016, 06:46 PM
Post
#13
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
You mean the text the user types? You must combine the script you got with your actual form.
|
|
|
|
| CharlesEF |
Feb 3 2016, 03:33 AM
Post
#14
|
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Pandy is correct, you have to integrate my code into yours. If you provide a URL link then maybe someone can help.
|
|
|
|
| MissR |
Feb 3 2016, 05:16 AM
Post
#15
|
|
Group: Members Posts: 6 Joined: 1-February 16 Member No.: 23,951 |
Yes I need to capture the text that the user submits. It goes into a black hole somewhere.
http://rinapatel77.wix.com/jewelry#!pr...e1-3326ee271c09 This is the test site I have been working on. It is one of those websites that host and provide templates for you. So not easy trying to get the functionality to suit your needs. |
|
|
|
| pandy |
Feb 3 2016, 10:03 AM
Post
#16
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
Did the form work before you added the script you got?
I looked, but that page is totally JavaScript dependent. JS generates the whole page. If I turn JS off I get a blank page. Not a great idea that, but I suppose that's how Wix works. I assume you change the content through some interface Wix provides, not by editing HTML the normal way. You must have broken something when you did. Can you start over and see to that the FORM tag is left intact? |
|
|
|
| MissR |
Feb 3 2016, 11:05 AM
Post
#17
|
|
Group: Members Posts: 6 Joined: 1-February 16 Member No.: 23,951 |
Hi Paddy,
Yes I edit through Wix's Interface. However I am actually able to embed the HTML code by dragging a HTML content box in there and pasting the script in that way. "Did the form work before you added the script you got" - No my old form didn't work before either. It didn't capture the text anywhere after checkout. I'll see if i can try again from scratch and see what happens. I did enter all the script with the form tags though. Thanks |
|
|
|
| CharlesEF |
Feb 3 2016, 12:38 PM
Post
#18
|
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
I don't know anything about WIX or how it works, so I can't help with it. I can say the important things to understand are:
This section needs to be in the <head> section or it needs to be an external javascript file that gets linked in your page CODE <script type="text/javascript"> function countChars(elem) { var max_chars = elem.getAttribute("maxlength"); var cur_chars = elem.value.length; document.getElementById('rchars').innerHTML = max_chars - cur_chars; } </script> The span that holds the remaining character count needs to have this attribute = id CODE <span id="rchars"> The input element where you enter the personalized words needs to have these attribultes = id, maxlength, onkeyup and oninput CODE <input type="text" id="pword" maxlength="30" onkeyup="countChars(this)" oninput="countChars(this)"> This section must go right before the closing </body> tag CODE <script type="text/javascript"> window.onload=function() { countChars(document.getElementById('pword')); } </script> |
|
|
|
| MissR |
Feb 10 2016, 02:11 PM
Post
#19
|
|
Group: Members Posts: 6 Joined: 1-February 16 Member No.: 23,951 |
Thanks everyone for your help.
I couldn't get the text box to work in the end. It counted down the characters which was excellent. However, the text that was entered disappeared into a black hole somewhere after the order was submitted to the cart. It didn't capture the text anywhere. Thanks for taking the time to help me.  |
|
|
|
| CharlesEF |
Feb 10 2016, 02:58 PM
Post
#20
|
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
QUOTE(MissR @ Feb 10 2016, 01:11 PM) Thanks everyone for your help. I couldn't get the text box to work in the end. It counted down the characters which was excellent. However, the text that was entered disappeared into a black hole somewhere after the order was submitted to the cart. It didn't capture the text anywhere. Thanks for taking the time to help me. That sounds like a completely different problem, nothing to do with the javascript I provided. Can you attach the problem page? |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 26th April 2024 - 03:34 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC