IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Javascript et la balise INPUT


Sujet :

JavaScript

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2008
    Messages
    118
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2008
    Messages : 118
    Points : 94
    Points
    94
    Par défaut Javascript et la balise INPUT
    Salut à tous,

    Voila, j'ai juste besoin d'un peu d'aide car là je suis perdu

    J'ai un fichier Javascript (Javascript.js) qui contient mes fonctions javascript dont 1 qui est :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
        document.getElementById("btnRecherche").onclick = function(){
          alert("test");
        }
    Mon bouton se trouve sur une page (modifier.php), et je voudrais donc appeler ma fonction Javascript du dessus dans le bouton suivant :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
     <input type="button" id="btnRecherche" size="14" value="Rechercher" onclick="javascript:document.getElementById("btnRecherche").onclick/>
    En faisant comme cela, rien ne se passe... une erreur de syntaxe, de déclaration ?

    Merci à vous d'avance !

  2. #2
    Membre expérimenté
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Points : 1 333
    Points
    1 333
    Par défaut
    Salut,

    Alors pas besoin de mettre javascript: dans un onclick,
    et sinon tu recuperes une fonction mais n'en fais rien... essaye comme ca :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="button" id="btnRecherche" size="14" value="Rechercher" onclick="document.getElementById('btnRecherche').onclick();"/>
    Attention aussi aux " de javascript qui ferment ceux d'attributs HTML ; alterne avec '

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2008
    Messages
    118
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2008
    Messages : 118
    Points : 94
    Points
    94
    Par défaut
    Salut,
    merci à toi

    Justement, le but est de voir si l'element réagi à ma fonction javascript sur l'evenement du clic du bouton...

    Et apparement rien n'y fait... ceux que tu m'as donné ne fonctionne pas...
    Pourtant le javascript et bien activer car j'ai d'autres fonctions qui elles fonctionnent trés bien...

    Je ne comprends vraiment pas d'où peut venir l'erreur...

  4. #4
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Bonjour,
    je ne comprends pas bien : si ton .js est bien inclus dans modifier.php, il n'y a normalement rien de plus à faire

    Vu que tu vient d'affecter une fonction au onclick de l'élément qui doit l'appeler

    Si ce n'est, bien sûr, les corrections signalées par gwyohm ...

    A+

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 665
    Points
    66 665
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function foo(){
    alert('test')
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="button" id="btnRecherche" size="14" value="Rechercher" onclick="foo()"/>
    ???

  6. #6
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Points : 2 757
    Points
    2 757
    Par défaut
    salut



    Soit tu fais une fonction que tu appelles sur le onclick de la balise
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    // dans le javascript
    function toto(){
      alert("test");
    }
     
    //dans le html
    <input ... onclick="toto()" />
    soit tu mets les instructions dans la balise html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input ... onclick="alert('test')" />
    soit tu positionnes l'événement dans le javascript
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    document.getElementById("...").onclick = function(){
      alert("toto");
    }
    mais ne fais pas un mix de tout ça, sinon ça marche pas...
    et dans le dernier cas (positionnement dans le javascript) il faut que l'input soit créé avant d'essayer de lui mettre un gestionnaire d'événement.

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onclick="javascript:document.getElementById("btnRecherche").onclick
    Tu as aussi de gros soucis d'échappement et de fermeture de quotes

  8. #8
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2008
    Messages
    118
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2008
    Messages : 118
    Points : 94
    Points
    94
    Par défaut
    Justement, c'est ça que je trouve vraiment bizarre...

    Je vais vous mettre les extraits complet de code afin que vous compreniez mieux :

    le javascript.js

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
     
    // JavaScript Document
     
    window.onload = function() {
      document.getElementById("Envoi").onclick = function foo() {
      alert("test");
          if (document.getElementById("txtNom").value=="" || document.getElementById("txtPrenom").value=="") {
              alert("les 2 champs doivent être remplis");
              return false;
          }else{ 
              return true;     
          }
        }
     
        document.getElementById("btnRecherche").onclick = function(){
          alert("test");
        }
    }
     
     
    //-----------------------------------------------------------------
    //                        AJAX
    //-----------------------------------------------------------------
    le modification.php

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    ...
    <div id="divModification">
      <input type="text" id="txtRecherche" maxlength="30" size="15" class="Texte" />
      <input type="button" id="btnRecherche" size="14" value="Rechercher" onclick="document.getElementById('btnRecherche').onclick"/>
     
    </div>

  9. #9
    Membre expérimenté
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Points : 1 333
    Points
    1 333
    Par défaut
    Je comprends pas mieux... mes commentaires dans la citation:
    Citation Envoyé par Delack Voir le message
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // ...
    window.onload = function() {
    // gwyohm: pas d'element d'ID Envoi dans les fragments HTML envoyés...
    // de plus une fonction anonyme n'a pas à être nommée ...
      document.getElementById("Envoi").onclick = function foo() {
      alert("test");
          if (document.getElementById("txtNom").value=="" || document.getElementById("txtPrenom").value=="") {
              alert("les 2 champs doivent être remplis");
              return false;
          }else{ 
              return true;     
          }
        }
       
        document.getElementById("btnRecherche").onclick = function(){
          alert("test");
        }
    }
    //...
    le modification.php

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    ...
    <div id="divModification">
      <input type="text" id="txtRecherche" maxlength="30" size="15" class="Texte" />
      <input type="button" id="btnRecherche" size="14" value="Rechercher" 
    onclick="document.getElementById('btnRecherche').onclick()"/>
    //Gwyohm: Ne pas oublier les parenthèses 
    </div>

  10. #10
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Points : 2 757
    Points
    2 757
    Par défaut
    écho ? écho ?
    je suis choqué
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <input type="button" id="btnRecherche" size="14" value="Rechercher" 
    onclick="document.getElementById('btnRecherche').onclick()"/>
    onclick appelle onclick
    qui lui meme appellera onclick
    qui lui meme appellera onclick
    qui lui meme appellera onclick
    ...

    Citation Envoyé par bigboomshakala Voir le message
    salut



    Soit tu fais une fonction que tu appelles sur le onclick de la balise
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    // dans le javascript
    function toto(){
      alert("test");
    }
     
    //dans le html
    <input ... onclick="toto()" />
    soit tu mets les instructions dans la balise html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input ... onclick="alert('test')" />
    soit tu positionnes l'événement dans le javascript
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    document.getElementById("...").onclick = function(){
      alert("toto");
    }
    mais ne fais pas un mix de tout ça, sinon ça marche pas...
    et dans le dernier cas (positionnement dans le javascript) il faut que l'input soit créé avant d'essayer de lui mettre un gestionnaire d'événement.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Comportement balise input et javascript
    Par error404 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 29/11/2007, 00h43
  2. [CSS] personnaliser les boutons des balises INPUT
    Par Leviathan_72 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 08/11/2005, 15h22
  3. type "file" pour la balise input
    Par fa_say dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 23/09/2005, 15h13
  4. [DEBUTANT] CSS balise input
    Par nine dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 23/03/2005, 13h40
  5. police dans balise input et select
    Par le_ben dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 11/03/2005, 14h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo