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

<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"> <label for="destinataire">Sujet</label> <input name="sujet" type="text" class="form-control"> </div> <br /> <!-- TextArea Message --> <div class="control-group"> <label for="destinataire">Message</label> <textarea id="FormMessageMessage" name="message" class="form-control" rows="5"></textarea> </div> <br /> </div> <div class="modal-footer"> <div class="text-center"> <button type="submit" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-send"></span> Envoyer</button> <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Fermer</button> </div> </div> </div> </form> </div> </div>
// // 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');} if(json.message){$('#FormMessageMessage').parent().removeClass('has-error has-success').addClass('has-success');} else{console.log('Erreur de message');$('#FormMessageMessage').parent().addClass('has-error');} } } }); });

Questions / Comments:

Related: See More