Display and Change Text Area Input Length - Using jQuery

[tom.smith]

Hi

I have a field on my ebase form which is set to a text area. I would like to display to the user real-time data on how long the message is that they have input into the text box.

I've seen examples of this on the web using jQuery, looked through the API documentation and came up with something that I thought would work. However, I'm not getting any results.

I have a page, with a few field controls on it. I've gone into HTML properties of the text box, selected a keyup jQuery event, and added the following code:

Code: Select all

$('#messageText').keyup(function () {

  // Get the length of the users input 
  var messageLength = $eb.getFieldValue("ALERT_TXT").toString().length;

  // Calculate the messages used
  if (messageLength ­­= 160) {

    // 1 message used
    $eb.setFieldValue("ALERT_LENGTH", "1");
  }
  else if (messageLength = 161) {

    // 2 messages used
    $eb.setFieldValue("ALERT_LENGTH", "2");
  }
});

(note: if comparison statements should be <and>but the preview shows they can't be handled when wrapped in code tags)

I have given the text area the ID #messageText.

I have also ensured that the ALERT_LENGTH and ALERT_TXT fields on the page are set to w/r accessible.

I'm obviously missing something, but can't see what. I've only used jQuery once in the past, and didn't need jQuery to access any fields, so this is the first attempt.

Any pointers would be greatly appreciated.

Thanks

Tom

[LKirby]

Hi there,

In your JS provided, you're using a single = instead of ==, in JavaScript a single = will assign the right hand value to the left hand side (where as == will compare values) so in what you wrote, messageLength would always be set to 160. Also i doubt

Code: Select all

var messageLength = $eb.getFieldValue("ALERT_TXT").toString().length;

would work as while the user is typing into the text field, the server doesn't know what the user is typing so retrieving the length of the text area would probably return 0 every time.

Try out this code, with a couple of changes

Code: Select all

$('#messageText').keyup(function () { 

  // Get the length of the users input 
  var messageLength = $(this).val().length; 

  // Calculate the messages used 
  if (messageLength == 160) { 

    // 1 message used 
    $eb.setFieldValue("ALERT_LENGTH", "1"); 
  } 
  else if (messageLength == 161) { 

    // 2 messages used 
    $eb.setFieldValue("ALERT_LENGTH", "2"); 
  } 
});

Luke

[tom.smith]

Hi Luke

Thanks for your response.

My code actually test for greater than or less than, but the editor on the forum was stripping bits out as it didn't like those characters within the code blocks. Sorry, should have mentioned.

You make a very good point about the server vs client - I always try and do all processing server side so when I do use client processing I always forget to think where the data actually is.

I've tried your solution and still coming up with nothing. I've gone right back to basics with just a simple alert statement, no field reading etc, and I'm still coming up with zip, so I don't think the underlying issue is the code (or rather, is only the code).

I must be missing something very basic in configuring the form for jQuery. I'll tackle it again with a fresh perspective tomorrow.

Thanks again

[LKirby]

Hi,

Ah okay that would make sense, I've had that before where it would strip out certain characters

Just to check, what version of Ebase are you using? The Client API was introduced in v4.5 so anything lower and it wont work at all.

I've had a look at the Client API guide and realised why it appears that the field alert_length isn't getting set when it actually is being set.
This line sets the field value on the server but not on the client

Code: Select all

$eb.setFieldValue("ALERT_LENGTH", "1"); 

so you need to add an extra parameter to tell the server to refresh the field so the user see's the value in alert_length:

Code: Select all

$eb.setFieldValue("ALERT_LENGTH", "1", true); 

So the full code should be something like:

Code: Select all

$('#messageText').keyup(function () { 

  // Get the length of the users input 
  var messageLength = $(this).val().length; 

  // Calculate the messages used 
  if &#40;messageLength <= 160&#41; &#123; 

    // 1 message used 
   $eb.setFieldValue&#40;"ALERT_LENGTH", "1", true&#41;; 
  &#125; 
  else &#123; 
  	
    // 2 messages used 
    $eb.setFieldValue&#40;"ALERT_LENGTH", "2", true&#41;;  
  &#125;
&#125;&#41;;

See: http://dev-docs.verj.io/ufs/doc/client_ ... c363643689

[tom.smith]

Removed all of the jQuery stuff from the ebase form, left my head to clear, and then started again.

Now working fine.

Not sure what I'd missed to get the alerts working, as I'm 100% sure I did exactly the same as previously. But hey, its working now.

Thanks Luke for your help - and your final comment RE refreshing the field.