禁用模式中的按鈕刷新

Question

我的模式中的按鈕出現問題。在這個按鈕上我放了一個onclick，但問題是當點擊這一個mouse或enter時，頁面刷新。

這就是我想要它可以點擊ENTER和我的頁面做我的功能connexion()不刷新，因爲一個AJAX代碼裏面。

這是我的模態代碼：

<div class="modal fade" id="myModalLogin" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
    <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title" id="myModalLabel">Se connecter</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div id='wellconnexion' class="well"> 


          <h1 id="TitleHistoriqueconnnexion" class="text-center">Se connecter</h1> 
          <br> 

          <h4 id="ContentHistorique1"></h4> 

          <div id='contentconnexion' class="contentconnexion"> 
          <form > 
          <div class="form-group formmarginleft"> 
           <input name="user_login" id="user_login" type="text" placeholder="Identifiant" class="form-control"> 
          </div> 
          <div class="form-group formmarginleft"> 
           <input name="user_password" id="user_password" type="password" placeholder="Mot de passe" class="form-control"> 
          </div> 
          <div class="row"> 
          <div class="col-12-xs text-center"> 
          <button id="validerlogin" onclick="connexion()" value="Se connecter" class="btn btn-primary">Se connecter</button> 
          <div data-dismiss="modal" class="btn btn-warning">Fermer</div> 
           </div> 
          </div> 
          </form> 

         </div> 
        </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 

Answer 1

在你的onclick功能使用preventDefault功能，以防止它重新加載頁面。這應該解決這個問題。

https://api.jquery.com/event.preventdefault/

Answer 2

組屬性type爲button您的按鈕元素：

<button type="button" ... >Se connecter</button> 

默認情況下，按鈕元素集類型屬性等於submit，所以當你點擊這個按鈕，你的頁面被提交到服務器。

您可以檢查MDN文檔

提交：該按鈕的表單數據提交到服務器。如果未指定屬性，或者屬性動態更改爲空值或無效值，則這是默認值。

Answer 3

使用你的 「聯接（）」 函數的preventDefault http://www.w3schools.com/jsref/event_preventdefault.asp

....