禁用模式中的按钮刷新

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

....