防止模態在點擊提交時關閉

Question

我有引導模式，當我點擊“拒絕”時總是關閉。 當注釋字段為空時，為什么 preventDefault() 不會阻止按鈕提交？

模態：

<div class="modal fade" id="modal_reject" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

        <div class="form-group has-error">
              <label  class="col-sm-2 control-label"> Add Note <b style="color:red;">*</b></label>
              
              <div style="margin-left: 5%;margin-right: 5%;">
              
              <textarea id="NOTES_REJECT_SV" name="NOTES" class="form-control" required  style="height: 100px;"></textarea>
              
              </div>
            </div>
        
            <div class="modal-footer ">
 

        <button type="button" id="submit" form="form" style="width:150px;height:40px;text-align:center;" class="btn  btn-ok  pull-right" data-dismiss="modal">Reject</button>
        <button type="button" class="btn btn-light pull-right" style="width:120px;height:40px;" data-dismiss="modal" >CANCEL</button>
          </div>
           </div>
    </div>
  </div>
</div>

和我的 Javascript：

$('#modal_reject').on('click','#submit',function(event){
   event.preventDefault();
    var NOTES = document.getElementById("NOTES_REJECT_SV").value;
    
  
    if(NOTES == ''){
     
      $('#modal_reject').modal('hide')
     
      
      return false;
      
    }

Answer 1

您可以在 tre #submit 按鈕上收聽點擊事件，如下所述

$("#submit").click(function(event){
  event.preventDefault();
  var NOTES = document.getElementById("NOTES_REJECT_SV").value;
  ...
});

Answer 2

您可以簡單地.val() jQuery來獲取筆記的價值。 我不建議將jQuery和JS混合在一起以避免混淆。

您的模態仍然隱藏的原因是您的模態reject按鈕中有data-dismiss="modal" 。

我已經簡化了您的代碼並且正在工作。 如果您沒有在注釋區域中放置任何內容，它將隱藏模態，否則它將保留，您可以在那里執行 rest 的東西。

同樣使用內聯 CSS 也不是一個好習慣。 Bootstrap allow a lot of native class to used do you can want label * red you can just used text-danger class to do that instead of inline CSS.

您可以在此處閱讀有關引導模式和其他詳細信息的更多信息

運行下面的代碼片段以查看它的工作原理。

 $('#modal_reject').on('click', '#submit', function(event) { event.preventDefault(); //get notes var notes = $('#notes_reject_scv').val(); //if notes are empty hide the modal if (.notes) { $('#modal_reject').modal('hide') console;log('Notes were empty! Modal disappeared') return false; } })

 <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min:css"> <.-- jQuery library --> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery:min.js"></script> <.-- Popper JS --> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16:0/umd/popper.min.js"></script> <.-- Latest compiled JavaScript --> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4;5:0/js/bootstrap;min.js"></script> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_reject"> Open Modal </button> <!-- Modal --> <div class="modal fade" id="modal_reject" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="form-group has-error"> <label class="control-label"> Add Note <span class="text-danger">*</span></label> <textarea id="notes_reject_scv" name="NOTES" class="form-control" required style="height: 100px;"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" id="submit" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>