Bonjour à toutes et tous,

Je suis entrain de revoir la construction d'une page de contact contenant plusieurs services,
Avant j'avais fait cela en 2 catégories:
1-nous joindre par téléphone
2-nous joindre par mail

Dans la première catégorie, c'est une liste des service, avec le nom, ce qu'il font et le numéro de tel ainsi que le fax si il en possède un.
Dans la seconde catégorie, c'est un gros formulaire de contact, avec un select pour choisir le service que la demande concerne.

J'aimerai réunir tout cela pour cela prenne moins de place,
je procède donc en affichant une popup modal par service pour le formulaire de contact,
serai-ce possible d'avoir une seule popup modal ou les infos de services serai changer selon le service sur lequel on clic.

J'ai vu que fallait faire cela en ajax, mais je suis complètement perdu.

Voila mon nouveau code pour le moment

<div id="service-1" class="service">
<div class="fonction">Nom du service</div>
<div class="descript-fonction">sa description</div>
<div class="num-fonction">Tel: 00.00.00.00.00 - Fax : 00.00.00.00.00</div>
<p><a class="modalbox" href="#inline1"">Contacter le service</a></p>
</div>
 
<div id="inline1">
//mon formulaire de contact
</div>

et le morceau qui sert à ouvrir la popup

$(document).ready(function() {
		$(".modalbox").fancybox();
		$("#contact").submit(function() { return false; });

salut,

il faut qu'a l'ouverture de la popup tu ailles chercher les données.
tu peux aussi voir la chose dans l'autre sens : requete serveur pour avoir les données et dans la callback de success tu ouvres la popup après avoir placer les données comme il faut.

@+

il n'y a pas de bdd ici, je n'ai que 7 services en tout qui ne changent pas.
et justement je ne sait pas comment aller chercher les infos à l'ouverture de la popup,
je débute dans l'ajax.

je n'ai pas parler de sgbd, tu peux trouver la source de données autre part
Par contre il faut les données.
Tu peux très bien avoir un tableau javascript qui contient les données des services.
tu affiches la liste déroulante en fonction du tableau (value = id du tableau et tu affiches le nom du service).
lorsque tu choisis un service dans la liste déroulate, en javascript, tu récupères les infos du service et les affiches avec en dessous le formulaire de contact.
Pas besoin d'ajax pour ça.
Ensuite pour enregistrer les données du formulaire de contact tu peux effectivement l'utiliser pour envoyer les données coté serveur (stockage bdd ,email ce que tu veux).

le stockage des données directement dans le JS ne conseil pas pour éviter les problèmes de duplication de données et les p'tits malin qui pourrait modifier le source HTML.

donc le mieux serait, coté serveur, un fichier qui retourne la liste des services avec juste les données utiles (id, nom).
Lorsque l'on sélectionne une seervice une requêtes serveur (ajax) pour avoir les données.

et bien sur une requête serveur pour la validation du formulaire (si besoin).

est ce que tu sais, en javascript, afficher des données lorsque l'on change la valeur d'un select ?
tu peux t'inspirer de ce tuto : faq-tutoriels/listes-liees-avec-html-ja ... 55580.html
ensuite tu pourras regarder du coté des requêtes serveur en JS (jQuery est le framework js le plus courant).
lorsque tu sais comment réagir sur le changement du select tu peux tenter la requete serveur avec jQuery (si tu le choisis) pour afficher les infos du service.
Le principe
- la valeur du select change
- requête serveur pour avoir les données du service selectionné (donc avec l'id du service en paramètre infoService.php?idService=xxx).
- succès de la requête : affichage des informations (description, N° etc).

lorsque cela fonctionne tu peux faire la requête pour l'envoi du formulaire.

dans tous les cas la modale affiche toujours le même code et fait toujours la même chose quelque soit le service (et quelque soit le nombre de service).

@+

j'ai trouvé comment faire la chose,
même si je pense que l'on peut encore réduire le code, mais je sais pas trop comment faire avec les data ajax.

Voila mon nouveau code :

<div id="service-1" class="service">
                <div class="fonction">Nom du service</div>
                <div class="descript-fonction">Description du service</div>
                <div class="num-fonction">Tel: 00.00.00.00.00 - Fax : 00.00.00.00.00</div>
                <p><a data-toggle="modal" href="#inline" data-target="#inline" class="modalbox" rel="1">Contacter le service</a></p>
            </div>

le script :

<script>
$(".modalbox").fancybox(); 
$(".modalbox").click(function(oEvt){
    oEvt.preventDefault();
    var Id=$(this).attr("rel");
        $(".modal-header").fadeIn(1000).html('<div style="text-align:center; margin-right:auto; margin-left:auto">Patientez...</div>');
        $.ajax({
            type:"GET",
            data : "Id="+Id,
            url:"reponse.php",
            error:function(msg){
                $(".modal-header").addClass("tableau_msg_erreur").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).html('<div style="margin-right:auto; margin-left:auto; text-align:center">Impossible de charger cette page</div>');
            },
            success:function(data){
                $(".modal-header").fadeOut(20);
				$(".h2popup").html(data);
				
            }
        });
		$.ajax({
            type:"GET",
            data : "Id="+Id,
            url:"reponse2.php",
            success:function(data){
                $("#idservice").html('<input type="hidden" id="serviceid" name="serviceid" value="'+data+'" >');
            }
        });
    });
    </script>

et les pages reponse.php et reponse2.php

if ($_GET["Id"]=='1')
	{
	$service2="nom du service 1";
	}
	elseif ($_REQUEST["Id"]=='2')
	{
	$service2="nom du service 2";
	}
        echo "Contacter ".$service2;

echo $_GET["Id"];

Je n'ai pas trouvé comment faire pour en 1 requete ajax avec un retour multiple,
mais dans l'ensemble le tout fonctionne bien