Disable refresh on button in modal

Question

I have a problems with my button in my modal. On this button I have put a onclick, but the problems is when a click on this one mouse or enter, the page refresh.

That's I want it's to may click on ENTER and my page do my function connexion() does not refresh, because a make a AJAX code inside.

This is my modal code:

<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>

Your answers came back fast and furious. There is hardly a web programmer that has been around a while that has not accidently done this. — Bindrid, Dec 06 '16 at 14:48

score 2 · Accepted Answer · answered Dec 06 '16 at 14:45

2

In your onclick function use the preventDefault function to prevent it from reloading the page. That should fix the issue.

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

answered Dec 06 '16 at 14:45

Blake Connally

689
1
4
16

kapantzak · Answer 2 · 2016-12-06T14:51:09.350

2

Set attribute type as button on your button element:

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

By default, button element sets type attribute equal to submit, so when you click on this button, your page gets submitted to server.

You can check the MDN documentation

submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

edited Dec 06 '16 at 14:51

answered Dec 06 '16 at 14:45

kapantzak

11,610
4
39
61

Thanks. I have wasted many hours on that just because I do not know default type is "submit" – Erdel Jan 31 '20 at 15:29

score 0 · Answer 3 · answered Dec 06 '16 at 14:47

0

use preventDefault http://www.w3schools.com/jsref/event_preventdefault.asp

on your "connexion()" function....

answered Dec 06 '16 at 14:47

John

1,711
2
29
42

why the downvote?...It was the right answer.... – John Dec 06 '16 at 17:25

Disable refresh on button in modal

3 Answers3