"Modal Message Form Ajax"
Bootstrap 3.2.0 Snippet by guillaume-furet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row" style="margin-top:40px;">
<div class="col-md-12 text-center">
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ModalMessage">
<span class="glyphicon glyphicon-envelope"></span> Message
</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalMessage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<form id="FormMessage" class="form-horizontal">
<div class="modal-content">
<div class="modal-header btn-primary">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="text-center" id="myModalLabel">Message</h4>
</div>
<div class="modal-body">
<br />
<!-- Select Destinataire -->
<div class="control-group">
<label for="destinataire">Sélectionner un service</label>
<select id="FormMessageDestinatiare"class="form-control" name="destinataire">
<option value="0" selected="selected">Support</option>
</select>
</div>
<br />
<!-- input Sujet -->
<div class="control-group">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//
// Envoie les données du formulaire par Ajax
// Ajoute des classes error et succès suivant la réponse d'Ajax
// Réiniatlisation du formulaire lors d'un full succès
$('form#FormMessage').on('submit', function(e){
e.preventDefault();
console.log("Formulaire envoyer");
// Récupération des données du formulaire pour un envoi par _POST
var data_ajax = $(this).serialize()+"&z=message&o=send";
$.ajax({
url: 'api/privee/data', // URL ou envoyer les données
data: data_ajax, // Données à envoyer (formulaire)
type: "POST", // Méthode à utiliser
dataType: "json", // Forma de données retournées
success: function(json) {
console.log(json); // Logs des données reçus
if(parseInt(json)) // OK si c'est un nombre (je renvoie l'id de l'insertion SQL)
{
console.log("Message Envoyer");
$('#ModalMessage').modal('hide'); // Masquer le modal
// Reset des Class CSS d'erreur
$('form#FormMessage input[name="sujet"]').parent().removeClass('has-error has-success');
$('#FormMessageMessage').parent().removeClass('has-error has-success');
$('#FormMessageDestinatiare').parent().removeClass('has-error has-success');
// Reset du formulaire
document.getElementById("FormMessage").reset();
}
else if(json.error) // Une Erreur ?
{
// S'il y a une erreur on ajoute les classe .has-error ou sinon .success
if(json.destinataire){$('#FormMessageDestinatiare').parent().removeClass('has-error has-success').addClass('has-success');}
else{console.log('Erreur de destinataire');$('#FormMessageDestinatiare').parent().addClass('has-error');}
if(json.sujet){$('form#FormMessage input[name="sujet"]').parent().removeClass('has-error has-success').addClass('has-success');}
else{console.log('Erreur de sujet');$('form#FormMessage input[name="sujet"]').parent().addClass('has-error');}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: