Discussion :

[Progi1984]

Bonjour à tous,

je dois créer un formulaire (input de type text, et select) qui à partir d'informations saisies dans le formulaire génère via PHP & GD une image.

Pas de problème pour ce coté-là.

En fait, je dois mettre en place une prévisualisation qui à chaque modification du formulaire (dans les champs text ou select) change l'image placée en dessous du formulaire. Mais par contre, je ne vois pas du tout comment faire. Avez vous une idée ?

Merci d'avance de votre aide.
Progi1984

[marcha]

Salut,

En gros il te faut détecter d'abord lorsqu'il y a du changement dans ton
formulaire, soit par les évènements onchange sur les champs soit par
un timer qui vérifie les changements (ou encore, par une action manuelle
de l'utilisateur, par exemple un bouton "Recréer l'aperçu")

Ensuite il te faut poster les changement au serveur. Cette requête peut
se voir retourner directement la nouvelle image. Auquel cas le plus simple
est de passer les paramètres directement dans l'url de l'image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$('#mon_image').attr('src', 'generateur.php?' + args);

pour générer args tu peux utiliser serialize

[Progi1984]

J'allais donner la réponse, je viens de la trouver

Mon JS détecte les modifications pour les formulaires avec la classe srch. Le changement de l'attribut src pour la balise img génère à chaque appel l'image avec les différents paramètres.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Update_PreviewBusinessCard(event){
    if (event.keyCode == '13') {
        event.preventDefault();
    }
    var urlformvalues = "txtNom=" + $('[name=txtNom]').val();
    urlformvalues = urlformvalues + "&txtPrenom=" + $('[name=txtPrenom]').val();
    urlformvalues = urlformvalues + "&txtPoste1=" + $('[name=txtPoste1]').val();
    urlformvalues = urlformvalues + "&txtPoste2=" + $('[name=txtPoste2]').val();
    urlformvalues = urlformvalues + "&slctSite=" + $('[name=slctSite]').val();
    urlformvalues = urlformvalues + "&txtTel=" + $('[name=txtTel]').val();
    urlformvalues = urlformvalues + "&txtMob=" + $('[name=txtMob]').val();
    urlformvalues = urlformvalues + "&txtFax=" + $('[name=txtFax]').val();
    urlformvalues = urlformvalues + "&txtMail=" + $('[name=txtMail]').val();
    $(".businesscard_preview img").attr("src","ext_businesscard/ajaxBusinessCard.php?"+urlformvalues);
}
 
$(document).ready(function() {
    $('.srch').keyup(function(event){ // text
        Update_PreviewBusinessCard(event);
    })
    $('.srch').change(function(event){ // select
        Update_PreviewBusinessCard(event);
    });
});