Partage
  • Partager sur Facebook
  • Partager sur Twitter

javascript lors d'un évènement

Sujet résolu
    11 janvier 2009 à 17:15:55

    Bonjour,

    Je suis débutante en Javscript et j'aimerais exécuter un script lors d'un clique sur un bouton de type submit. Sur internet je ne trouve que ça :

    <form>
    <input type="text" name="champ_texte" value="Ma valeur
    d'origine" />
    <!-- Champ texte -->
    <input type="button" name="bouton" value="Changer"
    onclick="champ_texte.value='Ma valeur nouvelle valeur'" />
    <!-- Bouton qui servira à jouer avec les fonctions
    -->
    </form>
    


    Le problème c'est que ça ne change que que la valeur du bouton or moi je voudrais récupérer la valeur du champ_texte (jusqu'à là pas de problème) et exécuter une alerte en Javascript selon cette valeur. Tout cela en sachant que mon bouton ne renvoie pas à une autre page mais à la même page.

    Pourriez vous m'expliquer comment on fait?

    Merci d'avance ++

    • Partager sur Facebook
    • Partager sur Twitter
      11 janvier 2009 à 17:20:23

      Dans le onclick, tu peux y mettre ce que tu veux, dans ton cas j'imagine qu'il s'agit d'un appel de fonction :
      <input type="button" value="Changer" onclick="mafonction();" />
      
      • Partager sur Facebook
      • Partager sur Twitter
        11 janvier 2009 à 17:40:41

        Merci.

        Si je peux mettre ce que je veux alors je suppose que je peux faire cela ?

        <form action="essaie3.php" method="post">
        		
        <p>
           <label for="Pseudo">Pseudo : </label><input class="Pseudo" type="text" name="Pseudo" /><br/><br/>
           <label for="Age">Age : </label><input class="Age" value="" type="text" name="Age" /> ans<br/>
        </p>
        
        <?php 
             $Age = $_POST['Age'];
        ?>
        
           <input type="submit", value="Valider", onclick="var Age = <?php echo("$Age"); ?> ; if(Age < 15){ alert('blablabla'); }" /> <input type="reset", value="Effacer" />
        
        </form>
        


        Car je ne maitrise pas encore totalement les fonctions.

        Edit :

        Arf, j'ai essayé et ça ne marche pas.
        La première fois si je met un chiffre inférieur a 15, rien ne se passe.
        Et les autres fois, j'ai beau mettre un chiffre supérieur, mon alerte marche quand même. oO
        Si quelqu'un sait pourquoi, je suis prenante :)
        • Partager sur Facebook
        • Partager sur Twitter
          11 janvier 2009 à 18:02:12

          Attention, il faut bien comprendre comment fonctionnent le PHP et le javascript.
          PHP est lu du côté du serveur, alors que javascript est lu du côté du client. Ce qui signifie que tout ce qui est écrit en PHP sera exécuté avant le javascrip, tu ne peux donc pas utiliser une variable $_POST sans soumettre le formulaire.
          Si j'ai bien compris ce que tu cherches à faire, il s'agit d'une vérification avant la soumission du formulaire pour traitement, qui contrôle l'âge. Tu dois donc faire l'ensemble du traitement en javascript, et non en PHP.

          Voici une fonction javascript qui commence par repérer le champs "age" en fonction d'un id que tu dois lui rajouter, et qui vérifie sa valeur :
          function verifAge(){
          	//On repère le champ en fonction de son id
          	var input_age = document.getElementById('age');
          	//On récupère sa valeur et on la transforme en int
          	var age = parseInt(input_age.value);
          	//On affiche un alert si l'age est plus petit que 15
          	if(isNaN(age) || age < 15){
          		alert('L\'âge entré est plus petit que 15');
          		return false; //On empêche la soumission du formulaire
          	}
          	return true;
          }
          


          Explications : cette fonction retourne "true" ou "false". Cela sert à bloquer l'envoi du formulaire : si l'âge est plus petit que 15, l'alert est affiché et le formulaire n'est pas envoyé. Sinon, c'est la valeur "true" qui est retournée, et le formulaire est soumis.
          Pour pouvoir utiliser cette fonction, il faut l'appliquer lors de la soumission du formulaire : cela se fait grace à l'attribut onSubmit sur la balise form (et non sur l'input) :
          <form action="essaie3.php" method="post" onsubmit="return verifAge();">
          


          Enfin, il y a des erreurs HTML dans ton bout de code : on ne met pas de virgules entre les attributs d'une balise, comme tu l'as fait sur les boutons [je me demande d'ailleurs où tu as été pêcher ça :p ].

          Au final, cela donne le code suivant :
          <form action="essaie3.php" method="post" onsubmit="return verifAge();">
          	<p>
          	   <label for="Pseudo">Pseudo : </label><input class="Pseudo" type="text" name="Pseudo" /><br/><br/>
          	   <label for="Age">Age : </label><input class="Age" value="" type="text" name="Age" id="age" /> ans<br/>
          	</p>
          	<script language="javascript">
          		function verifAge(){
          			//On repère le champ en fonction de son id
          			var input_age = document.getElementById('age');
          			//On récupère sa valeur et on la transforme en int
          			var age = parseInt(input_age.value);
          			//On affiche un alert si l'age est plus petit que 15 ou si ce n'est pas un nombre
          			if(isNaN(age) || age < 15){
          				alert('L\'âge entré n\'est pas un nombre ou est plus petit que 15');
          				return false; //On empêche la soumission du formulaire
          			}
          			return true;
          		}
          	</script>
             <input type="submit" value="Valider" /> <input type="reset" value="Effacer" />
          </form>
          
          • Partager sur Facebook
          • Partager sur Twitter
            11 janvier 2009 à 18:34:32

            Effectivement je ne savais pas que le php ce s'exécutait avant le Javascript. :-°
            J'ai essayé ton code et tout marche bien. merci beaucoup.

            Grasse à toi j'aurai appris que :

            * document.getElementById(''); sert a repérer un champ par rapport à son id
            * parseInt(); sert a transformation du string en integer
            *onsubmit sert a envoyer ou non un formulaire en fonction de sa valeur "true" ou "false" (ou pas... ça j'ai pas très bien compris)
            Et surtout l'histoire du php serveur et du Javascript coté client.

            ++ :)
            • Partager sur Facebook
            • Partager sur Twitter
              11 janvier 2009 à 18:39:12

              Citation : derix

              *onsubmit sert a envoyer ou non un formulaire en fonction de sa valeur "true" ou "false" (ou pas... ça j'ai pas très bien compris)



              Je réexplique donc :p
              Si on appelle une fonction lors de l'évènement onsubmit sur un formulaire, celui-ci est soumis ou non selon le retour de la fonction (false -> le formulaire n'est pas soumis, true -> le formulaire est soumis et on est donc redirigé vers la page pour le traitement).
              Note que le principe fonctionne aussi pour bloquer un lien html :
              <a href="mapage.php" onclick="return mafonction();">Lien</a>
              

              En cliquant sur ce lien, on est envoyé vers mapage.php si mafonction() retourne true, mais on reste sur la même page (le lien est désactivé) si elle retourne false.
              • Partager sur Facebook
              • Partager sur Twitter
                11 janvier 2009 à 19:02:14

                Cette fois ci, j'ai tout compris :D

                Merci encore et bonne soirée ++
                • Partager sur Facebook
                • Partager sur Twitter

                javascript lors d'un évènement

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur
                • Markdown