Javascript function to hide button if textarea is empty does not work

Question

I have a textarea inside a div with a select dropdown underneath, and underneath that are two buttons. One is to preview, and the other is going to be for Uploading the text to a file. I am trying to hide the Upload button if the textarea is empty. My javascript is not working since it always hides the button.

Here is the form, button container, and select dropdown (with all of the options left out since there are 20 of them):

<div class="container">
<label for="text-area">Paste your code here: </label>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
    <textarea name="code_input" id="code_textarea" class="form-control" rows="15" placeholder="Start coding!" required><?= isset($_POST['code_input']) ? $_POST['code_input'] : '' ?></textarea>
    <div class="button-container">
        <select required name="language-select" class="form-control" id="language_selector">
            <option value="" selected disabled>Language</option>
            <option>20 options follow</option>
<!-- THIS WILL KEEP THE VALUE IN THE DROPDOWN AFTER SUBMIT -->
            <script type="text/javascript">
                document.getElementById('language_selector').value = "<?php echo $_POST['language-select'];?>";
            </script>
        </select>
        <br/>
        <br/>
        <div id="button-container" class="btn-toolbar">
            <button id="drive_submit_btn" class="btn btn-md" type="submit">Preview</button>
            <button id="upload_btn" class="btn btn-md" type="submit">Upload</button>
        </div>
    </div>
</form>
<div class="show-code">
    <script src="lib/prism.js"></script>
    <!-- THIS DISPLAYS THE CODE AFTER SUBMITTING USING THE PRISM.JS PLUGIN FOR SYNTAX HIGHLIGHTING -->
    <!-- Get language selection from dropdown and append it to language class. Echo the text as highlighted code -->
    <pre><code class="language-<?php echo $language ?>"><?php echo $user_code; ?></code></pre>
</div>
    </div>


<!-- THIS IS THE JAVASCRIPT TO HIDE THE BUTTON UNTIL TEXT IS ENTERED.-->
<!-- HOWEVER IT ALWAYS HIDES IT!! -->

<script>
$(document).ready(function() {
 /* I EVEN TRIED TO TRIM IT TO NO AVAIL */
    var content = $.trim($('#code_textarea').val());
    if(content.length === 0) {
        $('#upload_btn').hide();
    } else {
        $('#upload_btn').show();
    }
});
</script>

I've seen so many answers that link to their JSFiddle, and they all work fine. What is causing mine not to work correctly? Everything else works fine except for my JS function.

Answer 1

A native javascript solution.

Upload button is hidden from beginning, when a keyup event is fired for the textarea, the content of the textarea is checked and the button is either shown or hidden again

code_textarea.addEventListener('keyup', function(){
 if(code_textarea.value){
  upload_btn.classList.remove("hidden");
 }
 else {
  upload_btn.classList.add("hidden");
 }
});

.hidden {
  display:none;
}

<textarea name="code_input" id="code_textarea" class="form-control" rows="5" placeholder="Start coding!" required></textarea>

<button id="upload_btn" class="btn btn-md hidden" type="submit">Upload</button>

Answer 2

Attach your handler to textarea's 'keyup' event. (And start with invisible btn.)

$(document).keyup('.code_textarea',function() {
 /* I EVEN TRIED TO TRIM IT TO NO AVAIL */
    var content = $.trim($('#code_textarea').val());
    if(content.length === 0) {
        $('#upload_btn').hide();
    } else {
        $('#upload_btn').show();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<label for="text-area">Paste your code here: </label>
<form method="post" >
    <textarea name="code_input" id="code_textarea" class="form-control" rows="5" placeholder="Start coding!" required></textarea>
    <div class="button-container">
        <select required name="language-select" class="form-control" id="language_selector">
            <option value="" selected disabled>Language</option>
            <option>20 options follow</option>
<!-- THIS WILL KEEP THE VALUE IN THE DROPDOWN AFTER SUBMIT -->
            <script type="text/javascript">
                document.getElementById('language_selector').value = "";
            </script>
        </select>
        <br/>
        <br/>
        <div id="button-container" class="btn-toolbar">
            <button id="drive_submit_btn" class="btn btn-md" type="submit">Preview</button>
            <button style="display:none" id="upload_btn" class="btn btn-md" type="submit">Upload</button>
        </div>
    </div>
</form>
<div class="show-code">
    <script src="lib/prism.js"></script>
    <!-- THIS DISPLAYS THE CODE AFTER SUBMITTING USING THE PRISM.JS PLUGIN FOR SYNTAX HIGHLIGHTING -->
    <!-- Get language selection from dropdown and append it to language class. Echo the text as highlighted code -->
    <pre><code class="language-"></code></pre>
</div>
    </div>


<!-- THIS IS THE JAVASCRIPT TO HIDE THE BUTTON UNTIL TEXT IS ENTERED.-->
<!-- HOWEVER IT ALWAYS HIDES IT!! -->