Ecrire dans un input text via un input button

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

23 oct. 2007, 22:14

hmm... comme en php il faut délimiter les chaines de caractères... pas de copier coller :wink:

(a savoir que tu pourrais précharger les images... si tu veux en savoir plus regarde sur google et "rollover" qui utilise cette technique)

"chemin" doit être le chemin complet sur le serveur "http://...."

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 351 Messages

23 oct. 2007, 22:20

Nikel, ca marche :

Code : Tout sélectionner

var compteur_i = 1; function setText(element) { if( compteur_i <= 7) { // récupération de la source de l'image var src = element.src; // récupération de l'indice du dernier "/" de la source var indice1 = src.lastIndexOf("/"); // récupération de l'indice du dernier "." de la source var indice2 = src.lastIndexOf("."); // récupération de la chaine contenu entre "/" et "." // value contient la valeur à placer dans le champ texte... anciennement "element.value" value = src.substring(indice1+1,indice2); document.getElementById('checknum0'+compteur_i).value = value ; element.src = 'http://www.site.com/site/images/'+value+'-ok.gif'; compteur_i++; } }
Plus que le "disabled", et merci de ton aide déjà.

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

23 oct. 2007, 22:38

ce qu'on fera n'est pas un réel "disabled" puisque ça n'existe pas pour une image.

Le truc c'est donc de ne rien faire si la source de l'image cliqué correspond à l'image neutre (image cliquée).
On ajoute donc un test sur "value"
if(value.indexOf("-ok"))
{
    document.getElementById('checknum0'+compteur_i).value = value ;
    element.src = 'http://www.site.com/site/images/'+value+'-ok.gif';
    compteur_i++;   
}
comme ça on ne supprime pas réelement l'action onclick pour éventuellement s'en reservir par la suite en cas de modification d'un chiffre. Puisque pour l'instant une fois cliqué on ne peut plus revenir en arrière... mais ça c'est une autre histoire.

EDIT : changement dans le test :wink:

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 351 Messages

23 oct. 2007, 22:48

Donc, j'ai mis ca:
var compteur_i = 1; 

function setText(element) 
{ 
if( compteur_i <= 7) 
    { 
     // récupération de la source de l'image 
        var src = element.src;  
         
        // récupération de l'indice du dernier "/" de la source 
        var indice1 = src.lastIndexOf("/");  
         
        // récupération de l'indice du dernier "." de la source 
        var indice2 = src.lastIndexOf("."); 
         
        // récupération de la chaine contenu entre "/" et "." 
        // value contient la valeur à placer dans le champ texte... anciennement "element.value" 
        value = src.substring(indice1+1,indice2); 
if(value.indexOf("-ok")) 
 {
        document.getElementById('checknum0'+compteur_i).value = value ; 
		element.src = 'http://www.site.com/site/images/'+value+'-ok.gif';
        compteur_i++; 
		}
     } 
} 
Mais ca fait comme si je n'avais pas mis ce dernier test.

Mammouth du PHP | 19672 Messages

23 oct. 2007, 22:50

Bon, ben je vois que mon absence ne t'a pas arrêté, c'est bien :)

Et comme tu sembles avoir un système qui fonctionne, je peux maintenant te montrer le cone fonctionnel que j'avais préparé pour ça. Après, je te suggèrerai autre chose pour tes boutons.

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <!-- Date de création: 21/10/2007 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" /> <title>Remplir une grille de loterie</title> <meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" /> <style type="text/css"> /* <![CDATA[ */ input.choix_nombre { width: 30px; height: 30px; line-height: 30px; font-family: verdana, helvetica, sans-serif; font-size: 13px; font-weight: bold; border: 3px groove #f00; color: #33c; background-color: #ff0; text-align: center; margin: 2px; } input.selectionne { border: 1px solid #ccc; text-align: center; } /* ]]> */ </style> <script type="text/javascript"> /* <![CDATA[ */ /** * Fonction d'ajout d'un nombre sélectionné. * * Cette fonction va récupérer le nombre envoyé par un des boutons et * chercher le premier champ vide pour l'y insérer. * Le nombre cliqué sera désactivé, donc on ne pourra cliquer deux fois * le même nombre. * Si tous les champs sont remplis, on active et affiche le bouton d'envoi. * * @param {Int} nombre Entier envoyé par un des boutons. */ function ajoutNombre(nombre) { /* On boucle sur les champs à remplir */ for(var i = 1; i <= 7; i++) { /* On recrée l'identifiant du champ à traiter */ idChamp = 'checknum'+ i; /* On identifie le champ */ var champ = document.getElementById(idChamp); /* On vérifie si le champ est vide */ if(champ.value == '') { /* Le champ est vide, on y insère le nombre */ champ.value = nombre; /* On désactive le bouton cliqué */ var idBouton = 'bouton'+ nombre; /* Ce bouton est maintenant désactivé et on ne pourra plus cliquer dessus */ document.getElementById(idBouton).disabled = true; /* S'il s'agit du dernier champ, on active le bouton d'envoi et on l'affiche */ if(i == 7) { document.getElementById('envoi').disabled = false; document.getElementById('envoi').style.display = 'inline'; } /* On sort de la boucle, inutile de continuer pour rien */ break; } } } /** * Fonction de ré-activation des boutons. * * Appelée par le bouton reset, cette fonction va ré-activer * les boutons qui ont été cliqués et désactivés par la fonction * précédente, ajoutNombre() */ function activerBoutons() { var idBouton; var val; /* On boucle sur chaque bouton */ for(var i = 1; i <= 42; i++) { /* Reconstruction de l'identifiant de chaque bouton */ val = (i < 10) ? '0'+ i : i; idBouton = 'bouton'+ val; /* On ré-active le bouton. */ document.getElementById(idBouton).disabled = false; document.getElementById('envoi').style.display = 'none'; } } /* ]]> */ </script> </head> <body> <form id="loterie" action="./" method="post"> <fieldset style="border: none;"> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton01" value="01" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton02" value="02" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton03" value="03" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton04" value="04" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton05" value="05" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton06" value="06" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton07" value="07" /><br /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton08" value="08" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton09" value="09" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton10" value="10" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton11" value="11" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton12" value="12" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton13" value="13" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton14" value="14" /><br /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton15" value="15" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton16" value="16" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton17" value="17" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton18" value="18" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton19" value="19" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton20" value="20" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton21" value="21" /><br /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton22" value="22" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton23" value="23" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton24" value="24" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton25" value="25" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton26" value="26" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton27" value="27" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton28" value="28" /><br /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton29" value="29" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton30" value="30" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton31" value="31" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton32" value="32" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton33" value="33" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton34" value="34" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton35" value="35" /><br /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton36" value="36" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton37" value="37" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton38" value="38" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton39" value="39" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton40" value="40" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton41" value="41" /> <input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton42" value="42" /> <hr /> <input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum1" id="checknum1" value="" /> <input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum2" id="checknum2" value="" /> <input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum3" id="checknum3" value="" /> <input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum4" id="checknum4" value="" /> <input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum5" id="checknum5" value="" /> <input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum6" id="checknum6" value="" /> <input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum7" id="checknum7" value="" /> <hr /> <input type="reset" name="effacer" id="effacer" value="Recommencer !" onclick="activerBoutons();" /> <input type="submit" style="display: none;" name="envoi" id="envoi" value="Jouer !" disabled="disabled" /> </fieldset> </form> </body> </html>
Un détail, si tu le teste, teste-le tel quel en l'enregistrant sous "loterie.html" par exemple, pas en récupérant un bout de code dedans pour coler ailleurs, et lis bien les commentaires du code, ils sont important pour que tu comprennes bien le cheminement que j'ai suivi. Et si tu as des questions, ben n'hésites pas à les poser ;)

Pour avoir des images à la place de tes boutons, tu peux utiliser un style CSS en supprimant les bordures et en mettant l'image en arrière-plan. Ou encore utiliser des <input type="image" />

Mais je te suggère de clore le problème JavaScript ici et de relancer un sujet sur la manière de faire en CSS dans le forum approprié ;)
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

23 oct. 2007, 22:53

précission
 if(value.indexOf("-ok") == -1)

que tu aurais pu remarquer si tu testais les variables => alert() ... en javascript il sert toujours !

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 351 Messages

23 oct. 2007, 22:54

Bonjour et merci Cyrano, mais je vais pas clore pour relancer un nouveau juste pour le dernier petit soucis qui persiste, le faux "disabled", et sinon, je vais essayer ton code.

Merci

Eléphant du PHP | 351 Messages

23 oct. 2007, 22:58

Et bien, voila apparement tout fonctionne bien.

Donc je vous remercie à tous, surtout Truc et Cyrano, qui ont eu la patience, et j'y voit beaucoup plus clair avec le JavaScript dorénavant.

Merci encore à vous.

:wink:

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

23 oct. 2007, 23:02

Au plaisir, mais sache qu'il y a toujours des améliorations à faire.
Du moment que tu as moins peur du JS maintenant :wink:

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 351 Messages

23 oct. 2007, 23:03

Oui, c'est certain.

Et on peut dire (je pense :P ) qu'un script n'est jamais "parfait".