Formulaire dans fenêtre modale BOOTSTRAP

ojal
Les bases HTML/CSS

Bonjour,

Je souhaite avoir un formulaire dans une fenêtre modale BOOTSTRAP.
La validation de ce formulaire doit déclencher une action - comme enregistrer en BDD - et doit fermer la fenêtre modale, mais ne doit pas basculer sur une nouvelle url.
Or de façon classique, lorsque l'on valide un formulaire avec
<input type = "submit" value = "Envoyer">
on déclenche une action
<form action = "traitement_form.php" method="post">
mais cette action amène sur une nouvelle URL... alors que l'on voudrait avoir une action du type
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>

Quelles sont les bonnes méthodes à mettre en place??? Quels sont vos conseils :)

Merci par avance pour vos réponses :)

4 réponses

ClementParis

Soit tu met la même page que la page actuelle dans l'attribut action, soit tu désactives le comportement par défaut de l'envoie de formulaire en JS et tu envoies les données en AJAX

ojal
Auteur

Merci pour votre réponse, mais pourriez-vous détailler un peu plus svp :)

lamiinek

comme dit plus haut, tu peux facilement desactiver le comportement par defaut du bouton d'envoie via javascript en faisant un truc comme ce-ci:

$("button").click(function(e){
  e.preventDefault();
});

apres tu sauvegarde les donnees en ajax, un peu d'aide si tu connais pas l'ajax

samir234

salut tu vas devoir utiliser de lajax
//code html
<form role="form">
<input type="text" name="val">
<button type="button" class="btn btn-default ok">
</form>
//code jquery
$(function(){
$('.ok').click(function(i){
$.ajax({
//type du formulaire
type="post",
//page de traitement du formulaire
url="traitement_form.php",
//donnees a envoyer
data:{'nomvariabledenvoi='+$('#val').val()},
//type de reponse
dataType:'json',
//reponse
success:function(){}
});
});
});
//traitement_form.php
tu fais ton traitement