Character counts in multiline text field

333 views
Skip to first unread message

Sherry

unread,
Aug 24, 2015, 3:39:09 PM8/24/15
to XMPie Interest Group
Hello,

Can anyone tell me how to put in a character count limit in a custom text field? I was told by XMPie that it is in the min/max Validation section of the customization wizard, but that either doesn't work or I'm doing something wrong. Documentation is no help. I'm in uStore 8.2.

Thanks so much!

Adrian Mueller

unread,
Aug 24, 2015, 4:50:59 PM8/24/15
to XMPie Interest Group
Hi Sherry...

I just had to do the same thing. I did it with a regular expression under the Validation section in the Customization Wizard.

Here is the expression that I used: 

^[\s\S]{0,400}$

Replace the "400" with however many characters you want the limit to be.

Sherry Chaudoin

unread,
Aug 24, 2015, 5:02:16 PM8/24/15
to xmpie...@googlegroups.com
Thank you so much! I’ll give it a try!

--
You received this message because you are subscribed to the Google Groups "XMPie Interest Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to xmpie-users...@googlegroups.com.
To post to this group, send email to xmpie...@googlegroups.com.
Visit this group at http://groups.google.com/group/xmpie-users.
For more options, visit https://groups.google.com/d/optout.
NOTICE: This e-mail message, including any attachments, is for the sole use of the intended recipient(s) and may contain confidential or privileged information or otherwise be protected by law.  Any unauthorized review, use, disclosure, or distribution is prohibited.  If you are not the intended recipient, please contact the sender by reply e-mail, permanently delete the e-mail from your system, and destroy all copies of the e-mail.  The company has taken reasonable precautions to ensure no viruses are present in this e-mail.  The company disclaims responsibility and liability for any loss or damage arising from the use of this e-mail or attachments.

Sherry Chaudoin

unread,
Aug 24, 2015, 5:05:23 PM8/24/15
to xmpie...@googlegroups.com
That works!

Is there any way to have a character countdown associated with the specific text box? This particular piece has six different text boxes for custom input. If some of the text boxes are within the character limits and some are not, how will the user know which box to edit? 

Thanks again!

From: <xmpie...@googlegroups.com> on behalf of Adrian Mueller <argent...@gmail.com>
Reply-To: "xmpie...@googlegroups.com" <xmpie...@googlegroups.com>
Date: Monday, August 24, 2015 at 4:50 PM
To: XMPie Interest Group <xmpie...@googlegroups.com>
Subject: [xmpie-users] Re: Character counts in multiline text field

--
You received this message because you are subscribed to the Google Groups "XMPie Interest Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to xmpie-users...@googlegroups.com.
To post to this group, send email to xmpie...@googlegroups.com.
Visit this group at http://groups.google.com/group/xmpie-users.
For more options, visit https://groups.google.com/d/optout.

Sherry Chaudoin

unread,
Aug 24, 2015, 5:15:10 PM8/24/15
to xmpie...@googlegroups.com
I can change the error message for each text box to solve the problem, but if anyone knows of a way to show remaining characters, that would be very helpful.

Thanks again.

Adrian Mueller

unread,
Aug 25, 2015, 1:27:00 PM8/25/15
to XMPie Interest Group
Unfortunately, I haven't been able to figure that out either.

I'm glad I could help.

Sherry Chaudoin

unread,
Aug 25, 2015, 2:08:34 PM8/25/15
to xmpie...@googlegroups.com
Thanks Adrian.

couch

unread,
Aug 25, 2015, 5:48:48 PM8/25/15
to XMPie Interest Group
If you want a text area on the product customization step which shows the remaining number of characters left, you can use a simple HTML Generic type dial:

Set:
Dial Type: HTML Generic
Callback function: returnValue
Markup:

<table border="0" cellspacing="0" cellpadding="0"> <tbody>
  <tr valign="baseline">
    <td>
      <div class="FormLabel" style="width: 190px;">#DIAL_DISPLAY_NAME#: </div>
    </td>
    <td>
      <textarea  id="text" rows="4" columns="90"></textarea>
      <div  id="counter"></div>
    </td>
  </tr>
</tbody>
</table>

<script  type="text/javascript">
  $(document).ready(function() {

  //change the values below if need to change qty or message:
  var characters= 100;
  $("#counter").append("You have  <strong>"+ characters+"</strong> characters remaining");  

  $("#text").keyup(function() {
    if($(this).val().length > characters){
      $(this).val($(this).val().substr(0, characters));
    }
    var remaining = characters -  $(this).val().length;
    $("#counter").html("You have <strong>"+  remaining+"</strong> characters remaining");
    if(remaining <= 10) {
     $("#counter").css("color","red");
     } else {
       $("#counter").css("color","black");
     }
    returnValue($("#text").val());
    });
  });
</script>

Adrian Mueller

unread,
Aug 27, 2015, 3:24:25 PM8/27/15
to XMPie Interest Group
Thanks, Couch! You have made one of my customers very happy!

Sherry Chaudoin

unread,
Aug 27, 2015, 4:27:00 PM8/27/15
to xmpie...@googlegroups.com
I’m getting a very strange result.

I have six separate text blocks that each need their own counter. The instructions below work beautifully (thank you couch!!), but the product doesn’t behave.

I put the HTML Generic Dial type on all six of the Event Description text blocks in the customization wizard setup, but below is how it appears in the order screen. It puts the counter ONLY at the first event. To show that I did program all six event ADORs, I’ve attached a screen shot of event number three to show the coding. Any thoughts on what could cause this?

The other thing is that the data that I input in that custom text field (event description one) doesn’t display on the template in the same space that it actually IS on the template. It shoves it to the bottom of the page. Screen shot attached for that, too.


PROGRAMMING:

TEMPLATE PROOF



From: <xmpie...@googlegroups.com> on behalf of couch <sco...@gmail.com>
Reply-To: "xmpie...@googlegroups.com" <xmpie...@googlegroups.com>
Date: Tuesday, August 25, 2015 at 5:48 PM
To: XMPie Interest Group <xmpie...@googlegroups.com>
Subject: [xmpie-users] Re: Character counts in multiline text field

--
You received this message because you are subscribed to the Google Groups "XMPie Interest Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to xmpie-users...@googlegroups.com.
To post to this group, send email to xmpie...@googlegroups.com.
Visit this group at http://groups.google.com/group/xmpie-users.
For more options, visit https://groups.google.com/d/optout.
Screen Shot 2015-08-27 at 4.16.44 PM.png
Screen Shot 2015-08-27 at 4.24.19 PM.png
Screen Shot 2015-08-27 at 4.21.37 PM.png

Sylvain

unread,
Aug 27, 2015, 5:05:55 PM8/27/15
to XMPie Interest Group
because you copy/pasted the whole code in each one for your fields(I tested and validated that). Couch's code does work, but it needs a bit of polishing to be used in the manner you intend to use it.

BTW, thank you Couch. I have a piece of code that does the char counts like that but your script is slightly different and I like it!

couch

unread,
Aug 27, 2015, 5:08:22 PM8/27/15
to XMPie Interest Group
Adrian - Great. Remember you can charge more for "very happy". :)

Sherry - if you are going to use the code on multiple dials on the same page, you need to make some edits. 
1) The div tag which is holding the counter message - <div id="counter"></div> - needs to be unique for each dial on the page, so for the second one, name it <div id="counter2"></div>
2) In the code area for each dial, you will need to modify each $("#counter") - to be the relevant number for the div in that dial - eg $("#counter2") if you named it <div id="counter2"></div>

Sherry Chaudoin

unread,
Aug 27, 2015, 5:23:39 PM8/27/15
to xmpie...@googlegroups.com
Great! Thank you!

I’m not a coder (stating the obvious!), so thank you for the detail.

From: <xmpie...@googlegroups.com> on behalf of couch <sco...@gmail.com>
Reply-To: "xmpie...@googlegroups.com" <xmpie...@googlegroups.com>
Date: Thursday, August 27, 2015 at 5:08 PM
To: XMPie Interest Group <xmpie...@googlegroups.com>
Subject: [xmpie-users] Re: Character counts in multiline text field

--
You received this message because you are subscribed to the Google Groups "XMPie Interest Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to xmpie-users...@googlegroups.com.
To post to this group, send email to xmpie...@googlegroups.com.
Visit this group at http://groups.google.com/group/xmpie-users.
For more options, visit https://groups.google.com/d/optout.

couch

unread,
Aug 27, 2015, 5:30:25 PM8/27/15
to XMPie Interest Group
Oh, i just noticed that there is also a second field that needs renaming to use on multiple dials - it is the <textarea id="text" ...   and the  $("#text")

Sherry

unread,
Sep 11, 2015, 2:31:30 PM9/11/15
to XMPie Interest Group
If you don't mind, I'd like to beg for a bit more help. I went on vacation before resolving this. Silly me.

Below is my code that I thought followed your direction, but the counter doesn't actually work now. Am I missing a step or did I botch the code?

Here are my questions:
Does the div id need to just be counter 1, counter 2, counter 3, etc? I think that is what you are saying, but I'm not certain. I changed all instances (see red highlights) per your instruction #2. Is that right?
For the text area id, does that need to be the  name of the plan file dial name? In my case EventDescription01, EventDescription02, EventDescription03, etc. (see blue highlights).



<table border="0" cellspacing="0" cellpadding="0"> <tbody>
  <tr valign="baseline">
    <td>
      <div class="FormLabel" style="width: 190px;">#DIAL_DISPLAY_NAME#: </div>
    </td>
    <td>
      <textarea  id="text" rows="4" columns="90"></textarea>
      <div  id="counter1"></div>
    </td>
  </tr>
</tbody>
</table>

<script  type="text/javascript">
  $(document).ready(function() {

  //change the values below if need to change qty or message:
  var characters= 165;
  $("#counter1").append("You have  <strong>"+ characters+"</strong> characters remaining");  

  $("#EventDescription01").keyup(function() {
    if($(this).val().length > characters){
      $(this).val($(this).val().substr(0, characters));
    }
    var remaining = characters -  $(this).val().length;
    $("#counter1").html("You have <strong>"+  remaining+"</strong> characters remaining");
    if(remaining <= 10) {
     $("#counter1").css("color","red");
     } else {
       $("#counter1").css("color","black");
     }
    returnValue($("#EventDescription01").val());
    });
  });
</script>

THANK YOU AGAIN!

couch

unread,
Sep 13, 2015, 5:44:28 PM9/13/15
to XMPie Interest Group
I think your error is the id of the textarea. It is currently "text" when you are changing the keyup event on "EventDescription01":

Sherry Chaudoin

unread,
Sep 14, 2015, 11:05:31 AM9/14/15
to xmpie...@googlegroups.com
I see that I missed that one!

Thank you SO MUCH for the help! I really appreciate the support from this group!

I’ve successfully coded all six text areas with counters. It’s a happy day!





From: <xmpie...@googlegroups.com> on behalf of couch <sco...@gmail.com>
Reply-To: "xmpie...@googlegroups.com" <xmpie...@googlegroups.com>
Date: Sunday, September 13, 2015 at 5:44 PM
To: XMPie Interest Group <xmpie...@googlegroups.com>
Subject: [xmpie-users] Re: Character counts in multiline text field

--
You received this message because you are subscribed to the Google Groups "XMPie Interest Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to xmpie-users...@googlegroups.com.
To post to this group, send email to xmpie...@googlegroups.com.
Visit this group at http://groups.google.com/group/xmpie-users.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages