Ecrire dans un input text via un input button

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

23 oct. 2007, 18:20

oui enfin la tu as sauté des étapes par la même occasion.
on peut donc restreindre à :
var compteur_i = 1;

function setText(element)
{
    if( compteur_i <= 6)
    {
        document.getElementById('checknum0'+compteur_i).value = element.value ;
        compteur_i++;
     }
} 
avec une variable JS globale

Pour desactiver un bouton utilise la propriété "disabled" sur le bouton de la même manière que "value" pour le champ texte.Ce qui est bien c'est qu'on passe l'élément complet à la fonction (this) tu peux donc travailler avec comme si tu avais
document.getElementById('id_du_bouton').disabled = ...

/!\ 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, 18:32

Merci, est-ce possible de carément supprimer le button en le remplacent par une image au lieu de le rendre disabled?

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

23 oct. 2007, 18:42

c'est possible... ce que tu peux faire aussi est supprimer le bouton et remplacer par une image dès le départ.
Lorsque tu cliques dessus l'image change doit y avoir des sujet la dessus nottament avec "rollover" à la place de onclick mais l'idée serait la même.

/!\ 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, 18:44

Oui, mais si je met une image, la fonction ne marchera plus, si?

Et pour info, pourrait tu me donner le code, qui permet de remplacer le button par une image lors du clic?

Merci

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

23 oct. 2007, 18:47

si j'ai proposé de remplacer le bouton par une image dès le départ c'est parce que ça simplifirai son changement.
Plus "facile" de remplacer une image par une image qu'un bouton par une image (plus joli surtout).

La fonction fontionnera toujours il faut juste remettre l'événement JS sur la balise <img>

ensuite dans la fonction JS tu changeras dynamiquement la source de l'image pour la faire changer

/!\ 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, 18:50

Oui, mais sur l'image il y a un value?

Pourrait tu me montrer avec le dernier code JS que tu as fournit ?

Merci beaucoup.

Eléphant du PHP | 351 Messages

23 oct. 2007, 19:06

J'ai essayé et mis cela :

Code : Tout sélectionner

<img src='images/01.png' onclick=\"setText(this);this.disabled='disabled'\" value='01'>
Ca fonctionne bien, et sans même changer le JS, qu'en penses-tu?

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

23 oct. 2007, 20:49

<img src='images/01.png' onclick=\"setText(this);this.disabled='disabled'\" value='01'>
aie... j'en dis plus ? :lol:
Tu vas en apprendre des choses

Ce n'est pas possible de faire ça étant que ça puisse fonctionner :-k

Tout ce que tu as appris jusqu'alors n'étais pas pour rien mais pour la culture générale.
(A retenir que ce que tu voulais au départ fonctionne à l'heure acctuelle très bien. Maintenant il s'agit de rendre tout ça plus attractif)

On aura donc une balise d'image avec les attributs "src", "onclick" et c'est tout.
La fonction JS sera toujours appelée en passant le paramètre "this"
Voilà pour le html

Pour la fonction JS
Les images doivent tous respecter un "format" à savoir "1.png", "2.png"... la valeur à placer dans le champ texte en nom de l'image.

On récupère la source (src) de l'élément passé en paramètre :
(plus facile d'y voir plus clair dans ce cas avec un script :wink: )
function setText2(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);

// suite du script
...
}
N'hesite pas à afficher les variables à l'aide d'un alert() pour voir leur contenu !

Ensuite il faut remplacer la source de l'image tout simplement en changeant la valeur de l'attribut "src" de "element" (paramètre passé à la fonction) "element.src = ?? ".

ça fait peut être beaucoup d'un coup fais quelques essais et en cas de besoin pose les bonnes questions :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, 21:23

Alors, là je suis en galère total, je n'y arrive plus.

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

23 oct. 2007, 21:29

voilà tu as pris connaissance de la procédure :)

Montre nous le code html qui en sort d'après ces dernières explications, juste une image.
Crée toi des images numérotées de 1 à 6 pour débuter.

/!\ 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, 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).

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

23 oct. 2007, 21:49

On y est presque déjà :wink:

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.

/!\ 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, 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.

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

23 oct. 2007, 21:57

n'oublie pas de remonter le test :wink:

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"

/!\ 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: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++; } }