Ecrire dans un input text via un input button

par **kevinf** » 23 oct. 2007, 23:03

Oui, c'est certain.

Et on peut dire (je pense

) qu'un script n'est jamais "parfait".

par **Truc** » 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

par **kevinf** » 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.

par **kevinf** » 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

par **Truc** » 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 !

par **Cyrano** » 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é

par **kevinf** » 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.

par **Truc** » 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

par **kevinf** » 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à.

par **Truc** » 23 oct. 2007, 22:14

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

(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://...."

par **kevinf** » 23 oct. 2007, 22:01

Donc, j'ai essayé pour changer l'image, mais ca ne fait rien :

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 = images/+value+-ok.gif;
        compteur_i++; 
     } 
}

par **Truc** » 23 oct. 2007, 21:57

n'oublie pas de remonter le test

le changement d'image s'effectue en changeant la source donc :

Code : Tout sélectionner

element.src = chemin/nouvelle_image.gif

Prochaine étape le "disabled"

par **kevinf** » 23 oct. 2007, 21:52

Donc, voila :

Code : Tout sélectionner

var compteur_i = 1; 

function setText(element) 
{ 
     // 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( compteur_i <= 7) 
    { 
        document.getElementById('checknum0'+compteur_i).value = value ; 
        compteur_i++; 
     } 
}

Ca a l'air de marcher, manque donc plus que le changement d'image pour ne pas recliquer dessus le même chiffre.

par **Truc** » 23 oct. 2007, 21:49

On y est presque déjà

Attention des erreurs de nommage "indice 2" sans espace idem un peu plus loin (ma faute).

ce test if( compteur_i <= 7) va englober tout le contenu de la fonction, inutile de faire du traitement une fois tous les champs remplis.

Ensuite comme dit juste avant "element.value" devient "value" la variable définie juste avant.

A ce niveau les champs devraient se remplir correctement

On voit juste après pour le changement d'image.

par **kevinf** » 23 oct. 2007, 21:38

Voila, le JS :

Code : Tout sélectionner

var compteur_i = 1; 

function setText(element) 
{ 
     // 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 indice 2 = 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(indice 1+1,indice 2); 

    if( compteur_i <= 7) 
    { 
        document.getElementById('checknum0'+compteur_i).value = element.value ; 
        compteur_i++; 
     } 
}

Et HTML :

Code : Tout sélectionner

for ($i = 1; $i <= 6; $i++) {echo"
		 <img src='images/$i.gif' onclick=\"setText(this)\">";}

Mais je voudrais aussi que ca passe sur l'image associé après avoir été cliqué et qui ne soit plus cliquable. (sorte de disabled).

Ecrire dans un input text via un input button

Répondre

Étendre la vue Revue du sujet : Ecrire dans un input text via un input button