CODEWITHSUNDEEP
javascriptjqueryonload
lStoilov
lStoilov

Reputation: 1339

Execute JQuery function when the page is loaded instead on .keyup

I have a function that look like that 

var text_max = 200;
$('#count_message').html('0 / ' + text_max );

$('#text').keyup(function() {
  var text_length = $('#text').val().length;
  var text_remaining = text_max - text_length;

  $('#count_message').html(text_length + ' / ' + text_max);
});

And what I am trying to achieve is it to be executed immediately after the page is loaded, meaning that it counts the text length for the already existing text in the textarea and not after you type something.

I have tried putting it in a function like that 

function myFunction() {

var text_max = 200;
$('#count_message').html('0 / ' + text_max );

$('#text').keyup(function() {
  var text_length = $('#text').val().length;
  var text_remaining = text_max - text_length;

  $('#count_message').html(text_length + ' / ' + text_max);
});

}

And then executing it in the body like that 

<body onload="myFunction()">

But I am not doing something right or maybe that's not the way to do it. I have my suspicions that I have to do something within the .keyup(function() and not just loading it in the body but not really sure what to do. I have tried to find something in the jQuery Event Methods that I can use but couldn't find anything that works. Also, tried some ideas I found here but it did not work either.

Here is where I got the original script from https://www.codeply.com/go/s0F9Iz38yn/bootstrap-textarea-with-character-count-_-bootstrap-3

EDIT I want to keep the .keyup functionality but also to count when the page is loaded

Upvotes: 0

Views: 69

Answers (4)

tao
tao

Reputation: 90058

You need to name your function, so you can reference it:

let text_max = 200,
    text_length,
    text_remaining,
    getTextLength = function() {
      text_length = $('#text').val().length;
      text_remaining = text_max - text_length;
      $('#count_message').html(text_length + ' / ' + text_max);
    }


/* 
 * now you can bind the function to any event:
 */

$(document).on('ready', function(){
  $('#text').on('keyup', getTextLength);
  $(window).on('load', getTextLength);
})
#text {
  min-height: 123px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="text">As you can see, function runs once on window.load and once on each #text.keyup

Type anything...</textarea>
<span id="count_message"></span>

Note I do not apply the binding when the script is parsed, but on document.ready (when DOM parser reached </html>). This way I make sure #text is present in DOM when I bind to it. The accepted answer will fail if the script is placed before #text in DOM, because it executes too early.

Upvotes: 1

Cody
Cody

Reputation: 36

Simply call your function in in the window.onload function:

//call on page load
window.onload = function () {
myFunction()
}

//call on keyup
$('#text').keyup(function () {
myFunction()
});

function myFunction() {
var text_max = 200;
$('#count_message').html('0 / ' + text_max );
var text_length = $('#text').val().length;
var text_remaining = text_max - text_length;

$('#count_message').html(text_length + ' / ' + text_max);
}

You can keep call the same function for keyUp and for onLoad.

Upvotes: 0

Mandar Dhadve
Mandar Dhadve

Reputation: 381

If by "page load" you mean when the HTML document is loaded, try this:

$(document).ready(function() {

});

If by "page load" you mean when all the images on a page have also loaded then try this:

$(window).load(function() {

});

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

Remove the keyup outside from the function and call it on load like,

var text_max = 200;
function myFunction($txt) {
   var text_length = $txt.val().length;
   var text_remaining = text_max - text_length;
   $('#count_message').html(text_length + ' / ' + text_max);    
}
$(function(){
   $('#text').keyup(function(){
       myFunction($(this));
   });
   myFunction($('#text'));
});

Upvotes: 2

Related Questions