Skip to content

How to show remaining characters in a field on the edit form?

← Datagrid Edit
Use a custom event.  Note the sample code has the field name is called "status".

PHP

<?php
...

$afterShowForm = <<<AFTERSHOWFORM
function ()
{
    $("#tr_status > td.CaptionTD + td.DataTD").append("<span id='counter'></span>");
  $("#status").attr("onkeyup","updateCounter()");
}
AFTERSHOWFORM;
$dg->add_event('jqGridAddEditAfterShowForm', $afterShowForm);

...
?>

CSS

<style>
/* move the counter atop */
#counter{
  font-size: 8px;
    position: relative;
    top: -15px;
    float: right;
    padding-right: 25px;
    display:inline-block;
}
</style>


Javascript

<script>
// show how much characters in "status" field input. Max is 10
function updateCounter() {
  var maxChar = 10;
  var pCount = 0;
  var pVal = $("#tr_status > td.CaptionTD + td.DataTD input").val();
  pCount = pVal.length;
  $("#counter").text(pCount + '/' + maxChar);
}
</script>

Feedback and Knowledge Base

(thinking…)