Code optimisé ?
Bonjour à tous !
Je suis actuellement sur la réalisaiton d'un site internet, et j'ai actuellement plusieurs modal (bootstrap) sur ma page d'accueil. Nottamment pour l'inscription, la connexion, mot de passe oublié et enfin un formulaire de contact.
Tout fonctionne très bien et j'ai (avec l'aide d'internet) écrit ce code js qui permet d'éffacer tout les champs du formulaire lorsqu'un utilisateur quitte une modal.
Le voici :
Mon code JS
$(document).ready(function(){
"use strict";
$('#ModalConnect').on('hidden.bs.modal', function (event) {
$("#FormModalConnect")[0].reset();
$(".alert-danger").fadeOut();
event.preventDefault();
});
$('#ModalContact').on('hidden.bs.modal', function (event) {
$("#FormModalContact")[0].reset();
$(".alert-danger").fadeOut();
event.preventDefault();
});
$('#ModalStart').on('hidden.bs.modal', function (event) {
$("#FormModalStart")[0].reset();
$(".alert-danger").fadeOut();
event.preventDefault();
});
$('#ModalForgot').on('hidden.bs.modal', function (event) {
$("#FormModalForgot")[0].reset();
$(".alert-danger").fadeOut();
event.preventDefault();
});
});
Ce code fonctionne très bien. Mais il me semble un peu répetitif, non ? Je pense qu'il y à une meilleur méthode de l'écrire, mais comme je ne suis pas un pro du JS, je fait appel à votre aide. Peut être faire sa globalement ? Peut être tout bonnement lorsqu'une modal (peut importe laquel) est quitté, tout les formulaires sont remis à zéro.
De plus, je ne comprend pas vraiment ce que signifie : event.preventDefault(); es vraiment obligatoire ?
Merci d'avance pour votre aide :)
11 réponses
Salut,
Tes modals ont toutes la même classe .modal. Pourquoi ne pas t'en servir ?
Tu peux du coup t'en sortir avec un code simple :
$(function(){
$(".modal").on('hidden.bs.modal', function (event) {
$(this).find('form').trigger('reset');
$(".alert-danger").fadeOut();
event.preventDefault();
});
})Salut,
$("#ModalForgot #ModalContact #ModalConnect ").on('hidden.bs.modal', function (event) {
$(this).children('form').trigger('reset')
$(".alert-danger").fadeOut();
event.preventDefault();
});
ça devrait remplacer tout ton code en admettant que ton formulaire soit à l'interieur de la div
@plus
Pierre
Salut,
Il manque les virgules dans ton selecteur jquery ^^
Je conseille aussi de mettre ton preventDefault au debut de la fonction.
Pour le preventDefault, c'est pour stopper tout evenement qui pourrait etre attacher a ton element.
L'exemple parfait serait sur un bouton de type submit dans un formulaire. Si tu n'ajoutes pas le preventDefault() le comportement natif sur formulaire va se dérouler, et donc faire une soumission du formulaire avant meme que ton script ne soit executé.
Voila le code exact tester :D
$(function(){
$("#ModalForgot, #ModalContact, #ModalConnect ").on('hidden.bs.modal', function (event) {
$(this).children('form').trigger('reset')
$(".alert-danger").fadeOut();
event.preventDefault();
});
})@plus
Pierre
Merci pour votre aide les gars.
@pierrot01, par contre cette ligne ne fonctionne pas : $(this).children('form').trigger('reset').
Comme ca sa fonctionne :
$("#ModalForgot, #ModalContact, #ModalConnect ").on('hidden.bs.modal', function (event) {
$("#FormModalConnect")[0].reset();
$(".alert-danger").fadeOut();
event.preventDefault();
});
}); Mais du coup sa reset uniquement la modal connect.
J'ai également essayé comme ca, mais sa ne fonctionne pas non plus :
$(function(){
$("#ModalForgot, #ModalContact, #ModalConnect ").on('hidden.bs.modal', function (event) {
$("#ModalForgot, #ModalContact, #ModalConnect ")[0].reset();
$(".alert-danger").fadeOut();
event.preventDefault();
});
});
Re, mes modals sont dans des fichiers php séparées. Je les appels via include. Voici ma modal connect avec le formulaire de connexion (Ils sont tous plus ou moins identiques, evidememnt les noms des id changent)
<!-- Modal connexion-->
<div class="modal fade" id="ModalConnect" tabindex="-1" role="dialog" aria-labelledby="ModalConnect" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="FormModalConnect" class="form-home">
<h3>connexion membre</h3>
<h4 class="centrer form-signin-heading">Veuillez vous connectez</h4><br/>
<div class="alert alert-danger" id="resultat_connect" style="display:none"></div><br/>
<div class="form-group">
<input type="email" class="form-control" id="test_champ" name="email" placeholder="Identifiant ou email">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Mot de passe">
</div>
<div class="checkbox">
<input type="checkbox" id="check" name="remember"/>
<label for="check">
<span></span>Se souvenir de moi
</label>
</div>
<button class="btn btn-lg btn-girl btn-block" type="submit" id="submit">Se connecter</button>
</form>
<hr>
<a href="#ModalStart" data-toggle="modal" data-target="#ModalForgot" onClick="HideModalConnect()">Mot de passe oublié ?</a>
</div>
</div>
</div>
</div>
essay $(this).find('form')
mais j'ai essayer le code que je t'ai fpassé, il fonctionne.
tu dois avoir un loup ailleurs ;)
@plus.
Pierre
@Roak, effectivement, pas bête !
J'ai testé et sa fonctionne bien.
Résolu :) Merci pour votre aide les amis.