Forum d'entraide PHPFrance

Bonjour,

C'est un sujet déjà abordé sur le forum, et en tant que débutant j'ai emprunté les codes que j'ai trouvé dans les posts pour les appliqués à mon projet.

Mais ça ne marche pas. Je souhaite qu'en fonction de la sélection d'une checkbox qui se situe dans une case d'un tableau, s'affiche où non un champ text et le sigle € qui le suit dans cette même case. Le tableau est lui-même compris dans le formulaire car composé de plusieurs champs textes avant.

Voici mes petits bouts de code :

<script>function montrer()
{
   if (document.form.check.checked==true)
   {   
      document.form.text.style.visibility="visible";
   }
   else
   {
      
      document.form.text.style.visibility="hidden";
   }
}
</script>

<?php require_once('Connections/genealogie.php');
....
?>
....
<div align="center">
<form action="<?php echo $editFormAction; ?>"name="insert_commune" method="POST" id="insert_commune">
	<table width="69%" bgcolor="#99CCFF">
      <tr> 
        <td colspan="2">&nbsp;</td>
      </tr>
      <tr> 
        <td width="36%"><strong>Nom :</strong></td>
        <td width="59%"><strong> 
          <input name="commune" type="text" size="25" maxlength="15" id="commune">
          </strong> numéro INSEE<strong> 
          <input name="numero_commune" type="int" size="5" maxlength="6" id="numero_commune">
          </strong></td>
      </tr>
      <tr> 
        <td>Adresse : </td>
        <td> <input name="adresse" type="text" size="50" maxlength="50" id="adresse"></td>
      </tr>
....
[b]
      <tr>
	<td>Copies</td>
        <td><input name="Copies_auth" type="checkbox" onClick="montrer();" checked="checked" />
            <input type="Tarif_auth" name="Tarif_auth" document.form.text.style.visibility="hidden; display:none"><strong>€</strong>
        </td>
      </tr>[/b]
      <tr> 
        <td>Recherches</td>
        <td><select name="recherches" id="recherches">
            <option> </option>
            <option value="1">OUI</option>
            <option value="0">NON</option>
          </select> <input name="Tarif_recherches" type="text" size="5" maxlength="5" id="Tarif_recherches" /> <b>€</b>
        </td>
      </tr>
....

        <td width="59%"><input name="insert_commune" type="submit" id="insert_commune" value="Insérer" /></td>
      </tr>
    </table>
    <p> 
      <input type="hidden" name="MM_insert" value="insert_commune">
    </p>
  </form>
</div>

J'ai volontairement omis les parties du code qui ne me semblent pas utile pour la résolution du problème.

J'ai essayé avec cette méthode, onClick, onSelect, avec une méthode affichant ou ocultant une balise DIV mais rien de fonctionne, le champ texte et le sigle € restent visibles (pour ce dernier je comprend pourquoi).

Avez-vous une idée ?

merci.

Mouais, tu pointes pas sur les bons éléments et dans ton html, il y a une erreur pourtant énorme : tu as mis une instruction JavaScript en guise d'attribut.

On va modifier un peu tout ça. Les éléments sur lesquels tu vas pointer doivent avoir un attribut id, de même que la balise <form> : tu utilises une syntaxe XHTML pour tes balises <input />, fais pareil pour tout le formulaire dans ce cas, et en XHTML, l'attribut name est interdit dans la balise form : on la remplace par l'attribut id avec la même valeur.

Ça implique qu'on va modifier la manière de pointer sur les éléments., j'y reviendrai. Ensuite, on va afficher/masquer deux éléments : d'une part le champ de saisie, d'autre part le signe "€" : pour ce faire, on va encadrer le tout dans un élément <label> et mettre un attribut id à ce dernier. Voilà ce que ça donne :

-1- le JavaScript :

Code : Tout sélectionner

<script type="text/javascript">
/* <![CDATA[ */
function montrer(champ)
{
    if (document.forms['insert_commune'].elements['Copies_auth'].checked == true)
    {   
        document.getElementById('champPrix').style.display='inline';
    }
    else
    {
        document.getElementById('champPrix').style.display='none';
    }
}
/* ]]> */
</script>

Tu noteras que le type dans la balise script est obligatoire également en XHTML et remplace l'attribut "language" devenu obsolète. Et en XHTML, on ne peut pas mettre n'importe comment du code directement dans la page, il y a donc des commentaires spéciaux (CDATA) en début et en fin de code.

Ensuite, comme on utilise les attribut id au lieu de name dans les éléments, on pointe non plus en utilisant form.valeur-de-name-de-la-balise-form.etc... mais forms['valeur-de-l'id-de-la-balise-form'].etc... (attention au "s", il est indispensable)

-2- ta balise form devient :

<form action="<?php echo $editFormAction; ?>" id="insert_commune" method="POST" id="insert_commune">

-3- la case à cocher et le champ de saisie :

Code : Tout sélectionner

        <td>
          <input name="Copies_auth" id="Copies_auth" type="checkbox" onclick="montrer();" checked="checked" />
          <label id="champPrix" style="display: inline"><input type="Tarif_auth" name="Tarif_auth"><strong>€</strong></label>
        </td>

Voilà, fais les corrections dans ton code et teste ça : si tu as des questions sur un point que tu es pas sûr de bien comprendre, reviens les poser et sinon, ben oublie pas de venir nous mettre un [Résolu]

OK, merci ça marche.

une petite question supplémentaire, dans le javascript la fonction est définie pour l'action sur un seul champ texte

Code : Tout sélectionner

if (document.forms['insert_commune'].elements['Copies_auth'].checked == true)

Si je veux mettre en place la même action pour un autre checkbox et un autre champ text, me faut-il créer une autre fonction, ce que j'ai fais en attendant de poser cette question où est-il possible d'utiliser la même en mettant un attribut à la place de 'Copies_auth'

A part ça, je prend note de ces renseignements concernant le javascript et le XHTML et j'irai voir la doc pour connaitre les différences majeurs avec HTML.

Merci.

Encore moi, cette fois-ci pour fermer le sujet.

En cherchant un peu, j'ai trouvé la réponse à ma question, j'ai mis plusieurs boucles "if" dans la fonction. Chaque boucle agit sur un chexbox et un champ text différent.

Sujet RESOLU.

Merci.

Tu peux simplifier : au lieu d'une boucle, tu peux utiliser un paramètre dans ta fonction et dans ce cas, le gestionnaire d'évènement d'une case à cocher devra envoyer en paramètre l'identifiant du champ à afficher/masquer. Dans le JavaScript que j,ai mis, j'ai du reste oublié d'enlever ce paramètre dans la fonction et il n'est pas utilisé. Là, on va s'en servir et modifier comme suit:

Code : Tout sélectionner

<script type="text/javascript">
/* <![CDATA[ */
function montrer(champ)
{
    if (document.forms['insert_commune'].elements['Copies_auth'].checked == true)
    {   
        document.getElementById(champ).style.display='inline';
    }
    else
    {
        document.getElementById(champ).style.display='none';
    }
}
/* ]]> */
</script>

Et pour le HTML, on va faire ça simple pour illustrer :

Code : Tout sélectionner

        <td>
          <input name="Copies_auth" id="Copies_auth" type="checkbox" onclick="montrer('champPrix');" checked="checked" />
          <label id="champPrix" style="display: inline"><input type="text" name="Tarif_auth"><strong>€</strong></label>
        </td>
        <td>
          <input name="Copies_auth2" id="Copies_auth2" type="checkbox" onclick="montrer(champAutre);" checked="checked" />
          <label id="champAutre" style="display: inline"><input type="text" name="Tarif_autre"><strong>€</strong></label>
        </td>

Essaye ça et tu nous diras si ça ne fonctionne pas

Inséré tel quel, ça ne marche pas. Il faut un changement d'état de la première chexbox pour que le changement d'état de la seconde soit prise en compte.

Tu as raison, j'ai omis un détail.

Pour mes besoins personnels, je me suis fait un bout de formulaire utilisant ça, voilà ce que ça donne :

- le JavaScript :

Code : Tout sélectionner

/**
 * Fonction pour afficher/masquer le champ de saisie du numéro
 * de téléphone du formulaire de contact.
 */
function afficher(champ)
{
    document.getElementById(champ).style.display = 'block';
}
function masquer(champ)
{
    document.getElementById(champ).style.display = 'none';
}

- Et dans mon formulaire :

Code : Tout sélectionner

        <label>Souhaitez-vous être joint par téléphone ? : <input type="checkbox" name="ctct_appel" id="ctct_appel" value="" onclick="if(this.checked == true){afficher('telephone');} else {masquer('telephone');}" /></label>
        <label id="telephone" style="display: none">Votre numéro de téléphone : <input type="text" name="ctct_telephone" id="ctct_telephone" value="" /></label>

Regarde le gestionnaire d'évènement : là, je n'ai qu'une case, mais je pourrais en avoir 25, ça marcherait très bien du moment que j'envoie le bon paramètre. Le truc, c'est "this" qui indique à JavaScript "Cet élément-ci"

j'ai appliqué ce que tu as affiché précédemment, et chez moi ça ne marche pas :

Code : Tout sélectionner

<script type="text/javascript">
/* <![CDATA[ */
function afficher(champ)
	{
        document.getElementById(champ).style.display='block';
	}
function masquer(champ)
    {   
        document.getElementById(champ).style.display='none';
/* ]]> */
</script>

et mon formulaire (contenu dans un tableau)

Code : Tout sélectionner


...
<tr>
     <td>Copies possibles </td>
     <td>Oui<label><input name="copies_auth" id="copies_auth" type="checkbox" onclick="if(this.checked == true){afficher('tarif_copies');} else {masquer('tarif_copies');}" /></label><label id="tarif_copies" style="display: none"><input type="tarif_copies" size="1" align="right" maxlength="5" name="tarif_copies"> <strong>€</strong></label></td>
</tr>
<tr> 
     <td>Recherches à distance possibles</td>
     <td>Oui<label><input name="recherches" id="recherches" type="checkbox" onClick="if(this.checked == true){afficher('tarif_recherches');} else {masquer('tarif_recherches');}" /></label> <label id="tarif_recherches" style="display: none"><input type="tarif_recherches" size="1" align="right" maxlength="5" name="tarif_recherches"> <strong>€</strong></label>
     </td>
</tr>
...

je tourne et retourne les lignes de codes et pourtant je ne trouve pas où peut être l'erreur s'il y a ?

Compte les accolades dans ton JavaScript.

Oui, je viens de m'en appercevoir en faisant un copier-coller dans un autre fichier.

Par contre avec l'autre script, le champ text restait sur la même ligne alors que là il passe à la ligne en dessous ??

remplace dans ce cas la valeur "block" par "inline" dans le script.

OK, c'est nickel .

merci.

Forum d'entraide PHPFrance

Sélection Checkbox pour affichage champ Text

Sélection Checkbox pour affichage champ Text