Условно отображать текст на кнопке при изменении ввода - PullRequest
Новая
       20

Условно отображать текст на кнопке при изменении ввода

0 голосов
/ 30 ноября 2018

У меня есть поле ввода файла в форме.Я изменяю текст кнопки динамически в зависимости от того, загружен ли в поле ввода файл или нет.Он работает нормально, за исключением того, что я должен обновить страницу, чтобы текст изменился.Я хочу, чтобы текст переключался мгновенно в зависимости от состояния ввода.

Поле ввода 

 <input type="file" name="frontSide" id="frontSide" class="form-input" value="" style="margin-top: -30px;" data-parsley-doc = '' accept=".doc, .docx, .pdf" required>

Кнопка, которая изменяет текст динамически 

    <button type="submit" id="btnFront" value="" style="cursor: pointer;" class="jenga" disabled></button>

Условно переключаемый текст кнопки 

if ($('#frontSide').get(0).files.length === 1) {
         $("#btnFront").html('Thanks, Upload Back Side >>');
     }
     else{
        $("#btnFront").html('Upload Front Side');
     }

1 Ответ

0 голосов
/ 30 ноября 2018

Прослушивание события вашего входа change: 

$('#frontSide').on('change', /* ... */);

Демо : 

$(function() {
  function updateUploadBtnText() {
    if ($('#frontSide').get(0).files.length === 1) {
      $("#btnFront").html('Thanks, Upload Back Side >>');
    } else {
      $("#btnFront").html('Upload Front Side');
    }
  }
  
  $('#frontSide').on('change', updateUploadBtnText);

  updateUploadBtnText();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="frontSide" id="frontSide" class="form-input" value="" style="margin-top: -30px;" data-parsley-doc='' accept=".doc, .docx, .pdf" required>

<button type="submit" id="btnFront" value="" style="cursor: pointer;" class="jenga" disabled></button>
...