Remplir un champ texte avec le contenu de deux autres champs ?

@ybee

@ybee

Membre expert
Club iGen
18 Mai 2001
1 039
14
41
Embourg, Belgique
antoine.olbrechts.eu
Hello tout le monde!


Me revoici encore avec mes idées farfelues ;)
Je vous explique mon problème:

(comme d'hab, du Javascript, chose que je ne connais pas du tout)

Je cherche à faire updater en live un champ texte (que j'aurai désactivé à l'édition, juste affiché) à partir de deux autre champs.

En gros: un champ "Prénom" et un champ "Nom commercial", et que lorsque l'exposant remplit ces champs, le champ "Enseigne stand + catalogue" soit update, avec le contenu concaténé des deux autres champs ci-dessus...

Je sais pas si je suis clair, mais si quelqu'un sait m'aider ce serait génial :D

Merchiiii!!
 
Bloc de code: 
<input type="text" name="champ0" value="" id="champ0" onchange="result.value=this.value+' '+champ1.value" />
<input type="text" name="champ1" value="" id="champ1" onchange="result.value=champ0.value+' '+this.value" />
<input type="text" name="result" value="" id="result" />

c'est pas en live, mais quand le champ est modifi&#233; puis perd le focus, c'est updat&#233; :)
 
EDIT: dsl j'avais dis un peu nimp!! le code suivant devrait mieux marcher!! tu g&#232;re via css l'affichage du input tt simplement (les autres attributs sont juste donn&#233;s &#224; titre d'exemple, celui qui t'int&#233;resse est bien sur border: none; )

Bloc de code: 
<input type="text" name="champ0" value="" id="champ0" onchange="result.value=this.value+' '+champ1.value;"/>
<input type="text" name="champ1" value="" id="champ1" onchange="result.value=champ0.value+' '+this.value;" />
<input type="text" name="result" value="" id="result" size=35 style="background-color: #ffffcc; font-weight: bold; color: #115A0F;border: none;">

EDIT2 : j'allais oublier! pour le live il te suffit de remplacer onChange par onKeyUp (ou onKeyDown, ou onKeyPress)
 
Bloc de code: 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<script language="JavaScript" type="text/javascript">

    function auto_save_result(obj)
    {
        var val= new String();
        
        if(obj.id == "field:0")
            val = obj.value + document.getElementById("field:1").value
        else
            val = document.getElementById("field:0").value + obj.value
        
        if(val.length > 0){
        
            document.getElementById(obj.id).value = val;
            document.getElementById("field:res").value = val;
            alert(document.getElementById("field:res").value);
        }
    }
    
</script>
</head>
<body>
    <input type="text" name="field:0" value="" id="field:0" onmouseup="auto_save_result(this)" />
    <input type="text" name="field:1" value="" id="field:1" onmousedown="auto_save_result(this)" />
    <input type="hidden" name="field:res" value="" id="field:res" />
</body>
</html>
 
tatouille a dit:
Bloc de code: 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<script language="JavaScript" type="text/javascript">

    function auto_save_result(obj)
    {
        var val= new String();
        
        if(obj.id == "field:0")
            val = obj.value + document.getElementById("field:1").value
        else
            val = document.getElementById("field:0").value + obj.value
        
        if(val.length > 0){
        
            document.getElementById(obj.id).value = val;
            document.getElementById("field:res").value = val;
            alert(document.getElementById("field:res").value);
        }
    }
    
</script>
</head>
<body>
    <input type="text" name="field:0" value="" id="field:0" onmouseup="auto_save_result(this)" />
    <input type="text" name="field:1" value="" id="field:1" onmousedown="auto_save_result(this)" />
    <input type="hidden" name="field:res" value="" id="field:res" />
</body>
</html>
Cliquez pour agrandir...
c'est foireux ton truc non ? faut cliquer sur le champs et &#224; chaque fois il r&#233;-ajoute le contenu du champs text, non-seulement &#224; field:res, mais aussi &#224; celui qu'on a cliqu&#233; (field:1 ou field:0)

:confused:
 
ce n'est qu'un exemple de code (syntax conforme pas de majuscule),
c'est pas pour utilisation

l'important c'est le hidden (le champ cach&#233; qui contient le vraie r&#233;sultat )
si il veut enregistrer tout ce que fait l'utlisateur il le peut )

et pas le truc foireux de css de ZE :D

je suis pas la pour faire l'exercice &#224; sa place mais donner des pistes

:zen:
 
tatouille a dit:
et pas ton truc foireux de css
:zen:
Cliquez pour agrandir...
non non c moi le css!! ;)

mais par contre j'aimerai bien savoir ce qu'il y a de foireux à ca? (perso le javascript je trouve ca bcp plus foireux que le css!)

sinon j'avai essayé de faire un truc du genre mais j'ai pas réussi à faire véritablement qqc qui faisait l'équivalent du css.
 
  • J’aime
Réactions: tatouille
Zeusviper a dit:
non non c moi le css!! ;)

mais par contre j'aimerai bien savoir ce qu'il y a de foireux &#224; ca?.
Cliquez pour agrandir...
Parce qu&#8217;en html il vaut mieux utiliser les outils existant que de d&#233;tourner deux outils pour faire la m&#234;me chose.

En clair : depuis le html 3.2 au moins, il est pr&#233;vu de disposer d'un champ cach&#233; pour les formulaire (c&#8217;est le <input type="hidden">) sans rien avoir &#224; bidouiller :p de plus, si ton utilisateur s'amuse &#224; d&#233;sactiver tes feuilles de styles, ben ton champ invisible le devient vachement moins ;)
 
Nephou a dit:
Parce qu&#8217;en html il vaut mieux utiliser les outils existant que de d&#233;tourner deux outils pour faire la m&#234;me chose.

En clair : depuis le html 3.2 au moins, il est pr&#233;vu de disposer d'un champ cach&#233; pour les formulaire (c&#8217;est le <input type="hidden">) sans rien avoir &#224; bidouiller :p de plus, si ton utilisateur s'amuse &#224; d&#233;sactiver tes feuilles de styles, ben ton champ invisible le devient vachement moins ;)
Cliquez pour agrandir...
euh oui mais dans ma solution il n'y a aucun champ hidden justement et un code javascript on ne peut plus simple! cf le code suivant :

Bloc de code: 
<input type="text" name="champ0" value="" id="champ0" onchange="result.value=this.value+' '+champ1.value;" />
<input type="text" name="champ1" value="" id="champ1" onchange="result.value=champ0.value+' '+this.value;" />
<input type="text" name="result" value="" id="result" style="border: none;" />
l'initiateur de la question voulait obtenir une concat&#233;nation de 2 champs et afficher ce r&#233;sultat en live &#224; la suite sans cadre. le "calcul" est effectu&#233; via javascript et le rendu du input est g&#233;r&#233; via css pour supprimer la bordure.
Il n'y a l&#224; aucune ill&#233;galit&#233;, le code est propre et conforme &#224; tt standard (enfin si on accepte qu'utiliser javascript c'est respecter un standard!)

PS : et d'ailleurs en parlant de conformit&#233; (il ne faut pas oublier lors du traitement des donn&#233;es du formulaire d'utiliser les valeurs des 2 premiers champs puis de concat&#233;ner au besoin via php, on se pr&#233;munit ainsi des erreurs pour les utilisateurs non javascriptiens! :) )

EDIT : ou ca un size qqc?? je ne comprends pas.. ;-)
 
Zeusviper a dit:
euh oui mais dans ma solution il n'y a aucun champ hidden justement et un code javascript on ne peut plus simple! cf le code suivant :

Bloc de code: 
<input type="text" name="champ0" value="" id="champ0" onchange="result.value=this.value+' '+champ1.value;"[COLOR=red]_[/COLOR]/>
<input type="text" name="champ1" value="" id="champ1" onchange="result.value=champ0.value+' '+this.value;" />
<input type="text" name="result" value="" id="result" size=35 style="border: none;">
l'initiateur de la question voulait obtenir une concaténation de 2 champs et afficher ce résultat en live à la suite sans cadre. le "calcul" est effectué via javascript et le rendu du input est géré via css pour supprimer la bordure.
Il n'y a là aucune illégalité, le code est propre et conforme à tt standard (enfin si on accepte qu'utiliser javascript c'est respecter un standard!)
Cliquez pour agrandir...
size=35 c'est pas conforme du tout, faut les guillemets et vu que c'est la seule chose que tu as rajouté à part le style (il n'avais pas encore fais la demande) à mon code... ;)
Ah non, là où j'ai souligné en rouge, tu as oublié un espace :p :rateau:
 
  • J’aime
Réactions: Zeusviper
Zeusviper a dit:
euh oui mais dans ma solution il n'y a aucun champ hidden justement et un code javascript on ne peut plus simple! cf le code suivant :

Bloc de code: 
.... ;-)[/quote]

:D mais qu'es ce qui t'as fait monsieur javascript pour que tu l'aimes pas comme ça :D

le jevascript c'est foireux quand on le confond avec le JS_Script
et c'est pour ça que la plus-part des gens galerent parce qu'ils ne lisent pas ...

et le javascript est tres bien et tres puissant comme language de script objet
:zen:
Cliquez pour agrandir...
 
tatouille a dit:
:D mais qu'es ce qui t'as fait monsieur javascript pour que tu l'aimes pas comme &#231;a :D

le jevascript c'est foireux quand on le confond avec le JS_Script
et c'est pour &#231;a que la plus-part des gens galerent parce qu'ils ne lisent pas ...

et le javascript est tres bien et tres puissant comme language de script objet
:zen:
Cliquez pour agrandir...
Oui et en plus mettre un type="hidden" c'est aucun rapport avec du javascript, par contre il r&#233;utilise du javascript avec les deux onchange="" de mon code... :nailbiting:

sinon c'est vrai que l'utilisateur peux avoir d&#233;sactiv&#233; JavaScript, mais aussi css alors...
 
truk2oof a dit:
il r&#233;utilise du javascript avec les deux onchange="" de mon code... :nailbiting:
Cliquez pour agrandir...
non y a aussi le live que j'avai rajout&#233; quand meme! ;) le onKeyUp! c'&#233;tait d'ailleurs juste pour ca mon post d'origine mais ca a &#233;t&#233; &#233;dit&#233; et r&#233;&#233;dit&#233;! la tte premi&#232;re version que j'ai post&#233; n'avait meme rien &#224; voir avec ton code! vu que c'&#233;tait que du javascript total, mais c'&#233;tait foireux! apr&#232;s c vrai que j'ai pas rajout&#233; grd chose &#224; ton code! ;)

truk2oof a dit:
sinon c'est vrai que l'utilisateur peux avoir d&#233;sactiv&#233; JavaScript, mais aussi css alors...
Cliquez pour agrandir...
oui mais d&#233;j&#224; ca se rencontre bcp bcp bcp moins souvent! et d'autre part ca ne changera rien &#224; la page, a par que l'utilisateur en question aura une bordure.
En utilisant le javascirpt completement, l'utilisateur n'aura aucun texte d'affich&#233;!

tatouille a dit:
mais qu'es ce qui t'as fait monsieur javascript pour que tu l'aimes pas comme &#231;a
Cliquez pour agrandir...
rien de bien sp&#233;cial!:p
mais en fait il m'horripile lorsqu'il est fait &#224; l'arrache totale ce qui est tr&#233;s souvent le cas, et que en cons&#233;quence de quoi des formulaires ou des pages compl&#232;tes ne marchent que sous IE par ex!
et accessoirement pour ce qui concerne l'accessibilit&#233;, le JS c'est vraiment pas la joie!
mais sinon je n'ai rien contre et je l'utilise aussi dans une certaine mesure! mais les css font aujourd'hui bcp de ce qui a fait "l'apog&#233;e" de javascript donc je pr&#233;fere lagement!


tatouille a dit:
le jevascript c'est foireux quand on le confond avec le JS_Script
Cliquez pour agrandir...
au risque de me faire allumer:siffle:, c quoi le JS_Script ?? :siffle::mouais::confused:
EDIT : Merci!! ;)
 

Sujets similaires

570FF
[Tutoriel] Configurer un serveur VPN sous Mac OS X
Réponses
17
Affichages
24K
FAI et réseau Mac
sveireman
sveireman
Haut Bas
Back