CSS + JavaScript ; Changer la couleur des champs d'un formulaire

zoup1 · 24/03/2005 - 16h28

Salut,

Voilà je cherche à faire un formulaire dans lequel la couleur du fond des buttons change lorsque le contenu d'un champ a changé...

La façon dont je m'y prends pour l'instant, c'est de définir une feuille de style qui contient deux variante pour le style input. Il y a normal et modif. Au départ je définie mon champ input avec le mode "normal" et je souhaiterais que lorsque je clique sur le bouton, cela me change la classe pour passer en mode "modif".

Pour de vrai c'est pas cela que je veux faire, je souhaiterais changer la couleur du champ lorsque celui-ci est modifié, mais je pense que si j'ai faire la première étape décrite ci-dessus, j'arriverais sans problème à faire la seconde.

J'ai mis un bout de code qui illustre ce que j'ai voulu faire mais je cela ne fonctionne pas. Lorsque je clique sur le bouton pour changer la classe cela m'indique

Code:

Erreur : missing name after . operator
Code Source :
this.form.text1.class='modif'

Visiblement c'est la propriétée class que j'ai mis qui lui pose problème.

Je ne suis pas bien sur du vocabulaire que j'utilise car je dois bien avouer que je ne comprends pas encore très bien la philosophie du Javascript et du CSS et les liens qui existent entre l'un et l'autre...

Si quelqu'un pouvait m'aider, cela me serait d'un grand secours, Merci..

Code:

<html>
<head>
<style type="text/css">
    input.normal {
        border:1px solid black;
        background-color:red;
        font-family:"trebuchet ms",sans-serif;
        color:white;
    }

    input.modif {
        border:1px solid black;
        background-color:blue;
        font-family:"trebuchet ms",sans-serif;
        color:white;
    }

</style>
</head>

<body>
<form name="myForm">
The form's name is: <input type="text" name="text1" size="20" class="normal">



<input type="button" value="Change la classe" onClick="this.form.text1.class='modif'">
<input type="button" value="Change la valeur"  onClick="this.form.text1.value='valeur'">
</form>
</body>
</html>

syco · 24/03/2005 - 18h59

Hello !

this.form.text1.className='modif'

zoup1 · 24/03/2005 - 22h32

Envoyé par syco

Hello !

this.form.text1.className='modif'

Super, merci ca marche...

acx01b · 30/03/2005 - 00h47

pourquoi tu n'utilises pas une image arrière plan? c'est aussi simple et ça te donne plus de liberté...

zoup1 · 30/03/2005 - 08h44

Envoyé par acx01b

pourquoi tu n'utilises pas une image arrière plan? c'est aussi simple et ça te donne plus de liberté...

Parce que ce que je veux, c'est changer la couleur de mon boutton, mais aussi parceque maintenant que je sais faire cela, je saurais aussi changer le fond de mon boutton par l'intermédiaire d'une CSS...

Seb299792 · 30/03/2005 - 10h20

Juste une précision, la façon dont tu accède à la propriété 'ClassName', n'est pas des plus compatible.

Afin que le code reste pertinent pour la plupart des navigateurs : IE, Netscape, FireFox, ...
Il est préférable d'accèder ainsi :

Soit un formulaire dont on a précisé l'id et le name à 'MonForm', puis le bouton dont a également précisé l'id et le name à 'Monbouton1'.

Pour accèder à la propriété ClassName du bouton, il faut accèder au bouton ainsi :

window.document.forms['MonForm'].elements['Monbouton1'].className = 'maclass';

Ensuite pour faire plus court, on peut utiliser une variable voForm qui pointe systématiquement sur le formulaire :
var voForm = window.document.forms['MonForm'];

Ce qui donne :
voForm.elements['Monbouton1'].className = 'maclass';

C'est d'avantage Browser Compliant

Faith · 30/03/2005 - 10h29

Envoyé par Seb299792

var voForm = window.document.forms['MonForm'];

Ce qui donne :
voForm.elements['Monbouton1'].className = 'maclass';

C'est d'avantage Browser Compliant

Une question: la fonction document.getElementById(id) n'est elle pas plus "Browser Compliant" ?
Sachant qu'en plus, pour les versions IE antérieures à la 5.0, il y a une combine:
http://mozilla.tlk.fr/doc03.php

Seb299792 · 30/03/2005 - 13h36

Envoyé par Faith

Une question: la fonction document.getElementById(id) n'est elle pas plus "Browser Compliant" ?
Sachant qu'en plus, pour les versions IE antérieures à la 5.0, il y a une combine:
http://mozilla.tlk.fr/doc03.php

Et bien la réponse est dans ta question : getElementById n'est pas fiable pour les anciens navigateurs, alors qu'avec la solution proposé, tu répond à 99.xx % et tu n'as pas de test de navigateur à faire.
Moi, j'ai juste prie cette habitude d'accèder aux éléments de mes formulaires ainsi, c'est simple et efficace.

zoup1 · 30/03/2005 - 13h50

Re-Salut,

Je vous remercie de l'interêt que vous portez à mes petits soucis...
Le code que j'ai écris fonctionne sans problème sous firefox et IE sur PC comme sur Mac (j'ai pas tester IE Mac) par contre il ne fonctionne pas du tout sous Safari (Mac) mais bon c'est pas forcément très grave...

Je crois que le problème que j'ai rencontré est que je n'ai pas vraiment trouvé de document qui m'explique clairement les choses. Je n'ai pas réussi à trouver le ClassName dans les docs que j'ai trouvé sur le WEB, évidemment depuis que je sais que c'est ClassName qu'il faut utiliser j'ai trouvé d'autre choses mais bon...

J'ai l'impression de ne pas demander des choses très originales pourtant, mélange de HTML avec des CSS et du JavaScript. Evidemment j'ai trouvé plein de trucs sur CSS plein de trucs sur JavaScript, pleins de trucs sur HTML, mais rien qui mélange l'ensemble... au final je me rends bien compte que je bricole et que je fais des trucs sans vraiment savoir ce qui sera Browser Compliant ou pas...
Voilà, donc je suis à la recherche de documentation dans cet esprit... si vous connaissez quelque chose de bien...
Merci

Podoc · 30/03/2005 - 15h07

Bonjour,

Un excellent site (que dis-je : une référence) en français pour savoir comment manipuler les différentes techno web (css, javascript, html, xhtml)
http://www.openweb.eu.org/

A+

zoup1 · 30/03/2005 - 16h58

Merci, ce site m'a l'air effectivement interessant et en tout les cas il me donne envie de passer à du XHTML, (je pratique encore le HTML à moins que je ne fasse du XHML comme Mr Jourdain fait de la prose).
Je cherche aussi des choses qui soit plus des liens de références. ce qui m'interroge surtout c'est le lien entre les objets HTML (ou xHTML sans doute) et leur représentation en JavaScript. C'est cela le DOM ?

Seb299792 · 31/03/2005 - 09h38

Envoyé par zoup1

Merci, ce site m'a l'air effectivement interessant et en tout les cas il me donne envie de passer à du XHTML, (je pratique encore le HTML à moins que je ne fasse du XHML comme Mr Jourdain fait de la prose).
Je cherche aussi des choses qui soit plus des liens de références. ce qui m'interroge surtout c'est le lien entre les objets HTML (ou xHTML sans doute) et leur représentation en JavaScript. C'est cela le DOM ?

Et bien là, tu aborde le DHTML. En effet, on pourrait très bien créer une page contenant juste :
<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>
et créer tout le reste juste avec du javascript, du DHTML en soit.

Voici une liste de références :
Multi techno :

AllHTML

DevGuru

En DHTML quelques réf de choix :

DHTMLCentral (Excellent)

bodytag

brainjar

youngpup

J'en passe bien d'autres mais déjà avec ca, il y a de quoi faire.

staghind · 29/04/2011 - 08h16

Chaque fois qu'une description de la modification, il ya toujours beaucoup à parler dans le monde entier. Ils ne sont pas exemptés. Une déclaration est habituellement: "je dois changer presque immédiatement versions, donc ne comptez pas sur moi à ce jour continuent d'attaquer ...

walkershane123 · 05/07/2011 - 13h38

Without seeing the current coding of your page I will have to try to
give you a generic answer, should you require any further help at
integrating it into your site please ask for clarification and I will
do my best to respond promptly.

The easiest way to tackle this problem is to use style sheets. In the
example below I have used the onFocus and onChange events to show you
how to alter the color of a form element:

<style>.changecolor {background: blue}.currentcolor {background:red}</style>
<form>
First Name: <input type="text" size="10" name="myname"
onFocus="this.className='curre ntcolor'"
onChange="this.className='chan gecolor'"><br>
</form>

Therefore in your script if the field is not filled in you simply need
to change the color of the form elements using your existing "if the
box is empty" statement. An example of this can be seen below:

<style>.errorcolor {background: red}</style>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<FORM METHOD="POST" onSubmit="return valid(this)">
Your name:<BR><INPUT TYPE="text" NAME="myname" />
<INPUT TYPE="submit" VALUE="Submit" />
</FORM>

Once again, if you require any further help on this please ask for
clarification and I will do my best to help quickly. If you do
require further help it would be very helpful to see your current page
code and javascript script.