Question

我在表单上有一个文件输入字段。我根据输入字段是否上传了文件来动态更改按钮的文本。它工作正常，除了我必须刷新页面以使文本更改。我希望文本根据输入的状态立即切换。.

输入字段

 <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');
     }

Answer 1

收听您输入的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>

输入更改时有条件地在按钮上显示文本

1 个答案: