Si tu souhaites que le formulaire soit soumis via la requête ajax sans rechargement de la page, il faut bien laisser preventDefault() comme dans ton premier code.

Comment est défini le contenu de la modal, il dépend du retour de la soumission du formulaire ? Si oui, il faut alors récupérer le retour de la requête ajax afin de modifier le contenu de la modal avant de l'afficher.

[quote=kevinIsAJoke post_id=471154 time=1648641237 user_id=28185]
Le truc c'est que le formulaire est dupliqué plusieurs fois dans la page et il affiche à chaque fois la même "reveal" (modal) mais avec une info différente.

Quand je laisse le [b]e.preventDefault();[/b] la modal affiche toujours la meme info (premiere fois que je clique sur la page) et quand je le masque, il y a un refresh de la page mais l'info dans le modal change correctement.
[/quote]

Le truc c'est que le formulaire est dupliqué plusieurs fois dans la page et il affiche à chaque fois la même "reveal" (modal) mais avec une info différente.

[quote=ynx post_id=471152 time=1648639251 user_id=12960]
Pourquoi avoir déplacer le e.preventDefault(); après l'affichage de la modal ?
Il faut bien le laisser au début de ta fonction lié à l'événement submit comme dans ton premier code pour éviter que le formulaire soit envoyé via le navigateur (d'où le rafraichissement de la page non voulu)
[/quote]

Comme ceci ?

[code]

<script>
$(document).ready(function() {

$('.reveal').foundation('open');

$('form.more-info').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'post',
data: $(this).serialize(),
success: function() {
$('.reveal').foundation('open');
},
error: function() {
// alert('Aie !');
}
});
});
});
</script>

[/code]

Pourquoi avoir déplacer le e.preventDefault(); après l'affichage de la modal ?
Il faut bien le laisser au début de ta fonction lié à l'événement submit comme dans ton premier code pour éviter que le formulaire soit envoyé via le navigateur (d'où le rafraichissement de la page non voulu)

Bonjour,
pour simplifier il faut que tu mettes une écoute sur le bouton [url="https://www.w3schools.com/jsref/event_onsubmit.asp"]onSubmit[/url] .

En fait j'utilise Foundation 6 et non Bootstrap.

En faisant ceci, ça marche mais je rafraîchis alors la page.
J'ai l'impression que la "reveal" se lance et se ferme tout de suite et ensuite la page se recharge et la reveal apparait.

[code]

<script>
$(document).ready(function() {

$('.reveal').foundation('open');

$('form.more-info').on('submit', function(e) {
// e.preventDefault();
$.ajax({
type: 'post',
data: $(this).serialize(),
success: function() {
$('.reveal').foundation('open');
e.preventDefault();
},
error: function() {
// alert('Aie !');
}
});
});
});
</script>

[/code]

Ce refresh m'ennuie et en plus j'ai parfois une alerte "voulez vous renvoyer ce formulaire" qui se lance après.

Bonjour,

Comment est déclenché l'affichage de la modal ?
A priori, il faudrait remplacer dans ton code le alert("Ok !") par l'affichage de la modal bootstrap :
https://getbootstrap.com/docs/5.1/components/modal/#show

Il s'agit plus d'un problème en JS qu'en PHP...
Mon script php fonctionne mais le contenu dynamique se trouvant dans mon reveal (foundation) / modal (bootstrap) ne s'affiche que si je rafraîchis la page.

Voici le code qui fonctionne mais ne lance pas ma reveal.
(l'action du form se fait sur la même page c'est pour ca que j'ai pas mis URL dans le script.)

[code]
<script>
$(document).ready(function() {

$('form.more-info').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'post',
data: $(this).serialize(),
success: function() {
alert("Ok !")
},
error: function() {
alert('Aie !');
}
});
});
});
</script>
[/code]