Функция Javascript, чтобы скрыть кнопку, если textarea пуста, не работает

Question

У меня есть текстовое поле внутри div с выделенным выпадающим списком внизу, а под ним две кнопки. Один из них - для предварительного просмотра, а другой - для загрузки текста в файл. Я пытаюсь скрыть кнопку «Загрузить», если текстовое поле пуст. Мой javascript не работает, так как он всегда скрывает кнопку.

Вот форма, кнопка контейнер, и выберите выпадающий (со всеми опциями, оставленных вне, так как есть 20 из них):

<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> 

Я видел так много ответов, которые ссылаются на их JSFiddle , и все они работают нормально. Что заставляет меня работать неправильно? Все остальное отлично работает, за исключением моей функции JS.

Answer 1

Прикрепите обработчик к событию «keyup» в textarea. (И начать с невидимой БТН.)

$(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!! -->

Answer 2

Нативный Javascript решение.

кнопка Загрузить скрыт от начала, когда событие KeyUp обжигают для текстового поля, содержимое текстового поля проверяется и кнопка либо показать или скрыть снова

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>