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

在你的“connexion（）”函数....

在模态中禁用按钮刷新

3 个答案: