Bouton grisé, formulaire

Fermé
djstoun Messages postés 291 Date d'inscription mercredi 23 septembre 2009 Statut Membre Dernière intervention 26 mai 2023 - 22 juil. 2016 à 02:05
 sanchopansa - 22 juil. 2016 à 06:59
Bonjour tous,

Je souhaite que le bouton "valider" soit grisé avant d'avoir coché une option.

Je vous offre deux codes presque similaire, les deux ne fonctionnant pas.

Merci pour votre aide.

<SCRIPT language="Javascript">
function valid_form(){
document.getElementById("bouton_valider").disabled = false;
} </SCRIPT>
<h3>1° question : comment vous portez-vous ?</h3>
<div class="quest">
<div class="tr">


<body>

<?php error_reporting(E_ALL);?>


<form id="formulaire" name="form1" method="post" action="page2.php">
<p>

<label>
<input type="radio" name="R1" value="6" id="R1_0" />
Bien. </label>
<br /></p>
<label>
<input type="radio" name="R1" value="1" id="R1_1" />
Moyen.<br /></label>
</p>
<label>
<input type="radio" name="R1" value="3" id="R1_2" />
Mal.</label>
<br />
</p>
<p><br />
<input name="Validation" type="submit" id="bouton_valider" value="Valider" onclick="valid_form()" />


Et voici le 2e code avec le changement en dernière ligne, mais dans le cas suivant le bouton reste grisé.

<SCRIPT language="Javascript">
function valid_form(){
document.getElementById("bouton_valider").disabled = false;
} </SCRIPT>
<h3>1° question : comment vous portez-vous ?</h3>
<div class="quest">
<div class="tr">


<body>

<?php error_reporting(E_ALL);?>


<form id="formulaire" name="form1" method="post" action="page2.php">
<p>

<label>
<input type="radio" name="R1" value="6" id="R1_0" />
Bien. </label>
<br /></p>
<label>
<input type="radio" name="R1" value="1" id="R1_1" />
Moyen.<br /></label>
</p>
<label>
<input type="radio" name="R1" value="3" id="R1_2" />
Mal.</label>
<br />
</p>
<p><br />
<input name="Validation" type="submit" id="bouton_valider" value="Valider" disabled="true" />

1 réponse

Salut,

il y a un problème car ce que vous indiquez faire n'est pas ce que vous faites:

 document.getElementById("bouton_valider").disabled = false;

Ici vous activez le bouton d'envoi du formulaire.. lorsque vous envoyez le formulaire. ça ne peux pas marcher

votre formulaire(et le fonctionnement normal des formulaires) renvoi vers une autre page(ici en POST vers la page page2.php) donc c'est impossible de changer quoi que ce soit dans une page qui n'existe plus/n'est pas affichée puisque l'utilisateur en "envoyé" droit vers page2.php (qui renvoi peut être sur une autre page?)

Dans le premier exemple vous le mettez dans une fonction que vous n'utilisez pas donc ça reviens au même que rien faire.

Dans le 2ème exemple vous activez le bouton d'envoi par javascript alors que par défaut vous le désactivez... une des 2 actions est donc en trop, le javascript étant appliquée après le chargement de la page c'est donc cette instruction (activer le bouton du formulaire)qui est activée.

Corrigez déjà toutes ces erreurs de conception et revoyez vos bases de javascript.
Si c'est seulement visuel vous pouvez utiliser une class ou id CSS.

Si c'est la désactivation/activation du bouton d'envoi du formulaire qui vous intéresse il faut d'abord considérer l’événement déclencheur de celle ci, puis "écouter" l'élément concerné. Un écouteur est en programmation le fait de mettre cet élément déclencheur.

Voici un exemple à tester directement d'écouteur(listener) sur un élément HTML(et de son résultat):

http://www.w3schools.com/jsref/met_document_addeventlistener.asp
0