Discussion :

[dev66es]

Bonjour à tous,

J'essaye de faire un truc très basique mais je bloque :-)
J'ai une page de paiement sur un site de e-commerce. Dès qu'on clique sur un moyen de paiement cela renvoi vers une page de confirmation (c'est un href).
Évidemment je veux que si les CGV n'ont pas été cochées on ait un Pop Up (alert) qui demande de cocher la case d'acceptation et qui bloque le passage à l'étape suivante.
J'arrive bien à faire afficher l’alerte mais lorsqu'on clique sur OK on passe à la page suivante (de confirmation) au lieu de rester sur la page des moyens de paiement.
Je voudrais donc "annuler" le href si la case des CGV n'est pas cochée. C'est à dire que l’alerte s'affiche (ça j'arrive à le faire) mais que lorsque on clique sur "OK" on reste sur la page en cours et ont ne passe pas à la page contenue dans le href du lien.

Voici mon

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- Box CGV -->
<div class="payment_cgv mb-4">
	<div class="form-check">
	    <input class="form-check-input" type="checkbox" id="checkboxCgv" value=""> 
	    <label class="form-check-label" for="defaultCheck1">
		  	Merci d'accepter nos CGV (<a href="/cgv" target="_blank">Voir les CGV</a>)
	    </label>	  					
        </div>
</div>
 
<!-- Moyen de paiement -->
<div class="card mb-2 card_disabled link_active">
   <div class="card-img-content payment_icons d-none d-lg-table-cell">
	<span class="icon_cheque"></span>
   </div>
   <div class="card-body">
      <p class="card-text">
         <a class="card-link" href="/orderConfirm/check" title="">Payer par chèque bancaire</a>
      </p>
   </div>
   <div class="card-icon-link">
       <i class="fas fa-chevron-circle-right" data-fa-transform=""></i>
    </div>
</div>

Mon JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(document).ready(function(){
    $("#payment .card").click(function(){
      if($('input#checkboxCgv').is(':checked') == false){
        alert("Vous devez accepter les Conditions Générales de ventes avant de pouvoir continuer");
        event.preventDefault();
      }
    });
});

Je pensais que le event.preventDefault(); pouvait faire l'affaire mais on passe quand même sur la page suivante.

Quelqu'un aurai une idée ?

Merci

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(document).ready(function(){
    $("#payment .card").click(function(e){
      if($('input#checkboxCgv').is(':checked') == false){
        alert("Vous devez accepter les Conditions Générales de ventes avant de pouvoir continuer");
        e.preventDefault();
      }
    });

[dev66es]

Merci SpaceFrog de ta réponse.
J'ai essayé avec e.preventDefault(); (j'ai même essayé avec e.stopPropagation(); ) mais cela ne fonctionne pas.
J'ai l'impression que e.preventDefault(); n'a pas d'influence sur les href (en tout cas sur le mien)

[SpaceFrog]

as tu noté le passage du paramètre ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    $("#payment .card").click(function(e){

[dev66es]

Oui oui, mais cela n'a aucun effet :-(

Cela me donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$(document).ready(function(){
    $("#payment .card").click(function(e){
      if($('input#checkboxCgv').is(':checked') == false){
        alert("Vous devez accepter les Conditions Générales de ventes avant de pouvoir continuer");
        e.preventDefault();
      }
    });
});

Dans mon cas (et je ne sais pas pourquoi) le preventDefault(); n'annule pas le href.

Je ne sais pas trop comment faire.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
    $("#payment .card").click(function(e){
        e.preventDefault();
      if($('input#checkboxCgv').is(':checked') == false){
        alert("Vous devez accepter les Conditions Générales de ventes avant de pouvoir continuer");
        }
      else {
        self.location.href=$(this).attr('href');
}
    });
});