Bootstrap Modal中的提交按鈕無輸入

Question

這是我的問題的更新。現在我已經addede的HTML

// Creating new room 
 
     $("#createRoomBtn").click(function(){ 
 
      var roomName = $("#createRoomName").val(); 
 
      if (roomName.trim() == "") { 
 
      return; 
 
      } else { 
 
       $("#createRoomName").val(""); 
 
       socket.emit("serverCreateNewRoom", roomName); 
 
       $("#msg").prop("readonly", false); 
 
       $("#msg").attr("placeholder", "Your message"); 
 
       $("#send").attr("disabled", false); 
 
       $("#roomModal").modal('hide');  
 
      } 
 
     }); 
 

 
     $(".modal-content").keypress(function(e){ 
 
      var roomName = $("#createRoomName").val(); 
 
      if (roomName.trim() == "") { 
 
      return; 
 
      } else { 
 
       if (e.which == 13) { 
 
       $("#createRoomName").val(""); 
 
       socket.emit("serverCreateNewRoom", roomName); 
 
       $("#msg").prop("readonly", false); 
 
       $("#msg").attr("placeholder", "Your message"); 
 
       $("#send").attr("disabled", false); 
 
       $("#roomModal").modal('hide'); 
 
       } 
 
      } 
 
     });

<!--Modal start--> 
 
<div class="modal fade" id="roomModal" tabindex="-1" role="dialog" aria-labelledby="createRoomLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
     <h4 class="modal-title" id="createRoomLabel">Create room</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     You can create a chat room here. Names have to be unique. 
 
     <form class="form-inline" id="createRoomForm"><input type="text" class="form-control input-lg" placeholder="Room name" id="createRoomName" required /></form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-lg btn-default" data-dismiss="modal">Close</button> 
 
     <button data-dismiss="modal" id="createRoomBtn" class="btn btn-success btn-lg">Create room</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--Modal end-->

我試圖禁用在引導模式提交按鈕，直到用戶填寫的文字。 「Enter」鍵就像這一點，所以我能理解爲什麼它不會爲按鈕工作

client.js

$("#createRoomBtn").click(function(){ 
     var roomName = $("#createRoomName").val(); 
     if (roomName.trim() == "") { 
     return; 
     } else { 
      $("#createRoomName").val(""); 
      socket.emit("serverCreateNewRoom", roomName); 
      $("#msg").prop("readonly", false); 
      $("#msg").attr("placeholder", "Your message"); 
      $("#send").attr("disabled", false); 
      $("#roomModal").modal('hide');  
     } 
    }); 

    $(".modal-content").keypress(function(e){ 
     var roomName = $("#createRoomName").val(); 
     if (roomName.trim() == "") { 
     return; 
     } else { 
      if (e.which == 13) { 
      $("#createRoomName").val(""); 
      socket.emit("serverCreateNewRoom", roomName); 
      $("#msg").prop("readonly", false); 
      $("#msg").attr("placeholder", "Your message"); 
      $("#send").attr("disabled", false); 
      $("#roomModal").modal('hide'); 
      } 
     } 
    }); 

Answer 1

JS：

$(document).ready(function(){ 

    $("input").keyup(function(e){ 
     var a=$('#name').val().trim(); 
     if(a!=''){ 
     $('#submit').removeAttr('disabled'); 
     } 
     else{ 
     $('#submit').attr("disabled","true"); 
     } 
    }); 
}); 

HTML：

<input type="text" id="name"> 
<input type="submit" id="submit" disabled="true"> 

DEMO：

https://jsfiddle.net/o2gxgz9r/5825/

Answer 2

定義你的表單元素時，應使用「必需的」屬性。

這就夠了。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<form id="saveForm"> 
 
<input type="text" name="name" required /> 
 
<input type="submit" name="Save" id="Save" value="Save Me" class="btn btn-primary"/> 
 
</form> 
 

 
<script> 
 
$("#saveForm").submit(function(){ 
 
    alert("submitted"); 
 
}); 
 

 

 
</script>

Answer 3

你的整個JS的邏輯應該是這樣的

$('formSelecter').submit(function() { 
    var inputField = $('inputSelector').val(); 
    if (inputField.trim() === '') { 
    return false; // this is what prevents the form from submission 
} 
}); 

另一種方式從提交到預防是required屬性添加到輸入字段。 像這樣

<input name="name" required/> 

希望這有助於。

Answer 4

感謝您的所有輸入。我現在開始工作了。我結束了使用此代碼時，模態顯示：$("#createRoomBtn").attr("disabled", true);

，然後這個只要用戶已經投中關鍵$("#createRoomBtn").attr("disabled", false);