CODEWITHSUNDEEP
javascriptjquery
Hassan Saqib
Hassan Saqib

Reputation: 2787

JS and Jquery function parameters are undefined

I am writing a counter code. I have following function which takes 4 parameters. 'fieldSelector' is the id or class selector of text-area, 'msgSelector' is a span on which text message has to be shown. 'min' and 'max' are the minimum and maximum limits of text.

  function updateCountdown(min, max, fieldSelector, msgSelector) {

    alert(msgSelector)

    var chars = jQuery(fieldSelector).val().length;
    var remaining = max - chars;
    if (chars < min){
      var moreChars = min - chars;
      jQuery(msgSelector).addClass('text-danger');
      if (chars == 0)
        jQuery(msgSelector).text('You need to add atleast ' + moreChars + ' characters.');
      else if (chars == min-1)
        jQuery(msgSelector).text('You need to add atleast ' + moreChars + ' more character.');
      else
        jQuery(msgSelector).text('You need to add atleast ' + moreChars + ' more characters.');
    }
    else
    {

      jQuery(msgSelector).removeClass('text-danger');
      if (remaining <=10)
        jQuery(msgSelector).addClass('text-danger');

      if (remaining == 1)
          jQuery(msgSelector).text('You can add only ' + remaining + ' more character.');  
      else if (remaining > 0)
          jQuery(msgSelector).text('You can add ' + remaining + ' more characters.');
      else if (remaining == 0)
        jQuery(msgSelector).text('Your limit has been ended.');
      else if (remaining == -1)
        jQuery(msgSelector).text('You have exceded ' + (-remaining) + ' character.');
      else 
        jQuery(msgSelector).text('You have exceded ' + (-remaining) + ' characters.');

  }
}

I am calling this part in following way.

 $(document).ready(function(){


 $('#profile_short_description_textarea').change(updateCountdown(100,150,'#profile_short_description_textarea', '#short_description_message'));
    $('#profile_short_description_textarea').keyup(updateCountdown(100,150,'#profile_short_description_textarea', '#short_description_message'));

});

The parameter values min, max, fieldSelector and msgSelector are passing only first time when the document is loaded. The value of min, max and other two parameters are coming undefined. What is wrong in this code?

Upvotes: 0

Views: 134

Answers (4)

Pintu Patel
Pintu Patel

Reputation: 1

Because only first time event Initialize..after than you need to re-initialize both event when any enebt ocuur.

So try this one..it Definitly work

   $(document).ready(function(){

$('body' or any parent element id or class of profile_short_description_textarea ).on("change",'#profile_short_description_textarea',updateCountdown(100,150,'#profile_short_description_textarea', '#short_description_message'))

$('body' or any parent element id or class of profile_short_description_textarea ).on("keyup",'#profile_short_description_textarea',updateCountdown(100,150,'#profile_short_description_textarea', '#short_description_message'))

});

Upvotes: 0

lshettyl
lshettyl

Reputation: 8181

You need to do the following.

$(function() {
    $('#profile_short_description_textarea').on("keyup change", function() {
        updateCountdown(100,150,'#profile_short_description_textarea', '#short_description_message');
    });
});

P.S. I have merged multiple events in to one as it's being triggered on the same element!

As the below is wrong!

$('#profile_short_description_textarea').change(updateCountdown(100,150,'#profile_short_description_textarea', '#short_description_message'));

You could do this when the function has no params, such as,

$('#profile_short_description_textarea').change(updateCountdown);

Where the function may look like:

function updateCountdown() {...}

Upvotes: 1

devqon
devqon

Reputation: 13997

Add the function to the callback instead of directly in the change():

$('#profile_short_description_textarea').change(function() {
    updateCountdown(100,150,'#profile_short_description_textarea', '#short_description_message');
});

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

Use like this

$('#profile_short_description_textarea').change(function() {
    updateCountdown(100, 150, '#profile_short_description_textarea', '#short_description_message');
});
$('#profile_short_description_textarea').keyup(function() {
    updateCountdown(100, 150, '#profile_short_description_textarea', '#short_description_message');
});

Upvotes: 2

Related Questions