-1

I have an issue that I'm trying to figure out. This is what I have so far and it seems to work the way it was but when I add in a php variable to auto popuplate the input field, it doesn't seem to calculate the characters used.

This field has a max value of 80 characters which I cannot control. I have to limit it ot 80 characters max. I need the input field to aut calculate once the form loads and the field is populated. When I include the php variable to the input value, the input field shows the field filled up with characters however, the field stays at "zero" characters until I move the mouse in the field and try to add another character. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script type="text/javascript">
document.testform.countInput.focus();
function countChars(countfrom,displayto) {
  var len = document.getElementById(countfrom).value.length;
  document.getElementById(displayto).innerHTML = len;
}
</script>

<form id="testform">
Title: <strong id="countOutput">0</strong><strong>/80 Max Character</strong>
<input  type="text" name="dsp_URL" value="" size="80" maxlength="80"  lengthcut="true" id="countInput" onkeyup="countChars('countInput','countOutput');" /><br />
</form>

<script type="text/javascript">


var input = document.getElementById ("countInput");
input.focus ();
</script>
<body>
</body>
</htmt>
brso05
  • 13,142
  • 2
  • 21
  • 40
paulsvang
  • 1
  • Your code doesn't contain any PHP, so it's not exactly clear what you're asking. Note that PHP is processed server-side, before any JavaScript runs. You can't use PHP code after the page is returned to the client. – elixenide Oct 07 '16 at 20:23
  • Also, `document.getElementById(countfrom).value.length` != `document.getElementById(countfrom).value` – elixenide Oct 07 '16 at 20:24
  • the php variable would go in the value="$url" which I left it out. But it does not work when tested. – paulsvang Oct 07 '16 at 20:28
  • You need to do one of two things: (1) Output the length where you want it when the page loads (e.g., ``) or (2) call the JavaScript function on page load. It will be `0` or whatever you prepopulate it with until the JavaScript fires. – elixenide Oct 07 '16 at 20:31
  • got it working guys. thanks for the input. – paulsvang Oct 31 '16 at 16:26

2 Answers2

1

You should call the function on load of the page along with the onkeyup event 

document.testform.countInput.focus();

function countChars(countfrom, displayto) {
  var len = document.getElementById(countfrom).value.length;
  document.getElementById(displayto).innerHTML = len;
}
<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>

<form id="testform">
  Title: <strong id="countOutput">0</strong><strong>/80 Max Character</strong>
  <input type="text" name="dsp_URL" value="" size="80" maxlength="80" lengthcut="true" id="countInput" onkeyup="countChars('countInput','countOutput');" />
  <br />

  <script>
    countChars('countInput', 'countOutput');
  </script>

</form>

<body>
</body>

Just make sure to define the countChars before calling it.

void
  • 36,090
  • 8
  • 62
  • 107
0

I think it is safe to assume that populating your text field with a string via php does not trigger the condition for countChars(), since its trigger is onkeyup on that text field.

Maybe you can find the solutions in How to impose maxlength on textArea in HTML using JavaScript helpful for your problem. I hope this helps your validation :)

Community
  • 1
  • 1