How do I make my javascript character counter work inside php?

Question

Hello, I have a javascript character counter that I use inside of a text area. It works great in normal html, but when I put the exact same code inside of a text area inside php, nothing.

Here it is in html when it works fine:

<div id="counter">
  <span id="counter_airway" style="font-size:11px; color:#666666;">140 Character Limit</span>
</div>
<div id="grapvine_text">
<form name="CommentBox" method="post" action="Profile.php?id=<?php echo $prof->id; ?>">
  <textarea name='airway' class='round_10px' onkeyup="limit_length(this,140,'counter_airway');"></textarea>
</form>

Here it is implemented inside my php form:

<div id="commentBoxBlog">
  <form name="CommentBox" method="post" action="Profile.php?id=<?php echo $prof->id; ?>">

      <?php
        if($auth->id == $prof->id) {
            echo "<div id='counter'>
              <span id='counter_airway' style='font-size:11px; color:#666666;'>140 Character Limit</span>
              </div><textarea name='airway' class='round_10px' onkeyup='limit_length(this,140,'counter_airway');'></textarea>
              <input type='submit' name='commentProfileSubmit' value='Exhale' class='post'/>";
        }
        elseif(!$auth) {
          echo "<textarea name='ProfileComment' class='round_10px' disabled>Please sign in to comment...</textarea>";
        }
        elseif($auth->id != $prof->id) {
          echo "<textarea name='ProfileComment' class='round_10px'></textarea>
            <input type='submit' name='commentProfileSubmit' value='Exhale' class='post' />";
        }
      ?>

  </form>
</div>

</div>

Answer 1

PHP works entirely on the server side. Your browser never sees a trace of PHP, just the HTML code generated by your PHP script. Javascript works entirely on the client side.

Whether your HTML comes from coding by hand, or a HTML script, is essentially not important. What you need to look at is the HTML that your script produced in the browser's "View Source" mode. Please post that into your question as well.

Answer 2

need to escape the quote, instead of:

onkeyup='limit_length(this,140,'counter_airway')

you can do:

onkeyup='limit_length(this,140,\"counter_airway\")'

Answer 3

You've got a quote nesting issue. You're surrounding the onkeyup attribute of the textarea with single quotes, but also using single quotes inside that javascript snippet. Since you're using double quotes for the PHP string, use escaped double quotes (\") within your javascript snippet.

Of course, it would be even better to separate javascript into an external file, and bind to the keyup event. You could do this easily by assigning an id to your textarea, and calling the following sometime after the DOM is ready:

var textarea = document.getElementById('myTextarea');
textarea.onkeyup = function() { limit_length(this,140,'counter_airway'); }

Answer 4

You have changed some of the double quotes to single quotes. This will cause errors, for example here:

onkeyup='limit_length(this,140,'counter_airway');'

Compare this to the original:

onkeyup="limit_length(this,140,'counter_airway');"

You need to escape the quotes rather than changing them:

onkeyup=\"limit_length(this,140,'counter_airway');\"