Textcounter Issue in php and javascript

Question

I have a textarea and a textcounter. requirement is when i write something on the textarea the textcount should increase or decrease as per the text.But its not happening.The Code is Shown Below.

    <div style="clear:both;"></div>
<div class="form-group col-md-12">
<div id="div_Description" name="div_Description" >
<div class="form-group col-md-12"  style="padding-left:0px;">
<label>Description</label>
<?php
  echo ('<textarea class="form-control" counter_box="textCounter" char_limit=250  id="Acivity_Details"  id="Acivity_Details" name="Acivity_Details" cols="" rows="2" placeholder="Achievement Details..." 
  onKeyUp="textcounter4(document.Add_Assessment.Activity_Details,this.lang,250)" 
    lang="textcounter4"   onKeyUp="textcounter4(document.Add_Assessment.Activity_Details,this.lang,250)" style="width:100%;" 
    value="'.$FormVars['Acivity_Details'].'"></textarea>');
 echo('<h5><small id="textcounter4"></small></h5>');
?>
<h5 style="margin:2px 0px;"><small id="textCounter">(250)</small></h5>
<code style="clear:both;" id="Acivity_DetailsError">
    <?php 
        if (array_key_exists('Acivity_Details', $Errors))
        {
            $tmp=$Errors['Acivity_Details'];            
            echo $PageErrors[$tmp][1];  
        }

    ?>
</code>



</div>

Any Help Appreciated

so you want when you enter some symbols to increase counter of letters in area and if you will remove some symbols then you need to decrease counter. Correct? — iurii_n
– iurii_n, Commented Oct 29, 2014 at 8:52
do you want to count how much characters text-area has and display that count in text-counter? — AkshayP
– AkshayP, Commented Oct 29, 2014 at 8:52

jogesh_pi · Accepted Answer · 2014-10-29 08:56:51Z

1

Take a look on this example, DEMO

$(document).ready(function() {

  $('#textarea').on('keyup', function(e) {
    e.preventDefault(); 

    var _len = $(this).val().length;
    $('#counter').text(_len);
  });

});

answered Oct 29, 2014 at 8:56

jogesh_pi

9,7745 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gowri · Accepted Answer · 2014-10-29 09:00:26Z

0

Try this

$(document).ready(function() {
    $('#Acivity_Details').keyup(function() 
    {
        $('#textCounter').text('('+eval( 250- $('#Acivity_Details').val().length)+')');
    });
});

Fiddle

answered Oct 29, 2014 at 9:00

Gowri

1,8563 gold badges33 silver badges56 bronze badges

Comments

AkshayP · Accepted Answer · 2014-10-29 09:04:35Z

0

Try this :

HTML

  <textarea id="Acivity_Details"></textarea>
  <div id="textCounter"></div>

JQuery

$(document).ready(function() {
  $('#Acivity_Details').on('keyup', function(e) {
    e.preventDefault(); 
    var len = $(this).val().length;
    $('#textCounter').text(len);
  });
});

FIDDLE DEMO

answered Oct 29, 2014 at 9:04

AkshayP

2,1592 gold badges19 silver badges27 bronze badges

Comments

iurii_n · Accepted Answer · 2014-10-29 09:04:57Z

0

Pure JS:

function countSymbols(obj)
{
    var count = obj.value.length;
    document.getElementById('counter').innerHTML = count.toString();
}

Html:

<form action="index.php" method="post">
    <label>Text: <textarea onkeyup="return countSymbols(this);" name="t" id="t1"></textarea></label>
    <p>Text counter: <span id="counter">0</span></p>
</form>

answered Oct 29, 2014 at 9:04

iurii_n

1,3801 gold badge12 silver badges19 bronze badges

Comments

argentum47 · Accepted Answer · 2014-10-29 09:21:19Z

Firstly you don't want to do all those echo, stuff, you need to keep the html separate from your logic. Although with raw php (php without frameworks its little difficult, but you can do it like this.

<div class="form-group col-md-12">
  <div id="div_Description" name="div_Description" >
    <div class="form-group col-md-12"  style="padding-left:0px;">
      <label>Description</label>
      <textarea id="text"></textarea>
      <span id="count"></span> charecters
      <code style="clear:both;" id="Acivity_DetailsError">
      <?php 
        render_page_errors($Errors);
      ?>
    </div>
  </div>
</div>
<script type="text/javascript">
  // since i am not much of jquery
  var $ = function(selector) {
    var q = document.querySelectorAll(selector);
    if (q.length == 1)
        return q[0];
    else 
        return q;
  };

  $("#area").addEventListener("keyup", function() {
      var a = $("#area");
      $("#count").innerHTML = a.value.length;
  });
</script>

and now you can have a file like showpage_helpers.php and put your:

function dump_page_errors($errors) {
    if (array_key_exists('Acivity_Details', $Errors))
    {
        $tmp=$Errors['Acivity_Details'];            
        return $PageErrors[$tmp][1];  
    }
}
function render_page_errors($errors) {
    $errors = dump_page_errors($errors);
    // and put some for_each block and put the errors in an unordered list maybe
}

and autoload this file in your php view file.

in there

Collectives™ on Stack Overflow

Textcounter Issue in php and javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related