CODEWITHSUNDEEP
javascriptphp
Shreyas Achar
Shreyas Achar

Reputation: 1435

Textcounter Issue in php and javascript

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

Upvotes: 0

Views: 66

Answers (5)

argentum47
argentum47

Reputation: 2382

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

Upvotes: 0

iurii_n
iurii_n

Reputation: 1370

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>

Upvotes: 0

AkshayP
AkshayP

Reputation: 2169

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

Upvotes: 0

Gowri
Gowri

Reputation: 1856

Try this

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

Fiddle

Upvotes: 0

jogesh_pi
jogesh_pi

Reputation: 9782

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);
  });

});

Upvotes: 1

Related Questions