Problème avec CCS display

Résolu/Fermé

isold Messages postés 57 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016 - 4 avril 2015 à 15:20
isold Messages postés 57 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016 - 5 avril 2015 à 01:28

Bonjour,

Je souhaite, dans une page, et par un clic sur un bouton, afficher ou non un formulaire pour compléter des informations. tel que ci-dessous :

AVANT CLIC:

Index au compteur à la date du --/--/---- : 1253
[Mettre à jour]
Suite...

APRES CLIC SUR LE BOUTON [Mettre à jour] :

Index au compteur à la date du --/--/---- : 1253
[Mettre à jour]
+----------------------------------+
| Date : [zone input]              |
| Index compteur : [zone input]    |
| [Valider]                        |
+----------------------------------+
Suite...

Avec, une fois la validation faite, "refermer" la zone de saisie affichée pour la mise à jour.

Voici mon code qui ne fonctionne pas :

<html>

<head>

<style type="text/css">
.index { display:none; border:1px solid #808080 }
</style>

<script language="javascript" type="text/javascript">
var hide = 1;
function hideshow() {
	if(hide) { hide = 0; document.infos.update.style.display = "block"; }
	else     { hide = 1; document.infos.update.style.display = "none";  }
}
</script>

</head>

<body>

<form name="infos" submit="<?php echo $_SERVER["PHP_SELF"]; ?>">
Bla bla bla...
<?php
$requete = "..."; // ici requete pour aller chercher l'index dans la BDD
echo "Index au compteur à la date du $r->date : $r->index<br/>\n";
?>
<input type="button" name="maj" value="Mettre à jour" onclick="javascript:hideshow();">

<div id="update" class="index">
  Date: <input type="text" name="date"><br/>
  Index compteur: <input type="text" name="index"><br/>
  <input type="submit" name="submit" value="Valider">
</div>
Suite...

</body>

</html>

Quelqu'un aurait-il une idée de l'endroit où ça pêche ?
Merci pour votre aide.

A voir également:

Problème avec CCS display
Display fusion - Télécharger - Divers Utilitaires
Display name traduction ✓ - Forum Mail
Wireless display edenwood ✓ - Forum Téléviseurs
Wireless display edenwood iphone - Forum TV & Vidéo
Display on moacloud - Forum Réseaux sociaux

1 réponse

Réponse 1 / 1

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
4 avril 2015 à 19:28

Salut

en me basant sur ton code j aurais fait un truc simple comme ca !

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
<style type="text/css">
.index {
  border: 1px solid #808080;
}

#update {
  display: none;
}
</style>

<script>
function hideshow(id) {
  var e = document.getElementById(id);
  if(e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}
</script>

  </head>
  <body>
    <form name="infos" submit="<?php echo $_SERVER["PHP_SELF"]; ?>">
      Bla bla bla...
      <?php
$requete = "..."; // ici requete pour aller chercher l'index dans la BDD
echo "Index au compteur à la date du $r->date : $r->index<br/>\n";
?>

<input type="button" name="maj" value="Mettre à jour" onclick="hideshow('update');">
      <div id="update" class="index">
        Date: <input type="text" name="date">
        <br>
        Index compteur: <input type="text" name="index">
        <br>
        <input type="submit" name="submit" value="Valider" onclick="hideshow('update');">
      </div>Suite...
  </body>
</html>

isold Messages postés 57 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016 5
4 avril 2015 à 20:22

Merci infiniment, Rad Zone, c'est très exactement ce que je voulais.
Selon toi, qu'est-ce qui clochait, dans mon code ?
Je n'arrive pas à voir où se situe l'erreur. Bon, toi tu va chercher l'élément à masquer avec getElementById('..') alors que je préfère nommer complètement cet élément. Mais en dehors de cela (qui devrait donner le même résultat) où est-ce que j'ai fait l'erreur ?
Excuse moi si je pose la question mais appliquer une procédure sans comprendre où on a fait l'erreur, c'est s'exposer à la refaire et je n'ai pas envie d'être blonde toute ma vie, (mdrrr... car en fait, je suis brune :-)
Je marquerai le sujet comme "Résolu" après ta réponse.
Encore une fois, merci ;-)

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360 > isold Messages postés 57 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016
4 avril 2015 à 23:45

Ta methode ne peux pas fonctioner tout simplement ! ;-)
les manipulation css par js ce font dans le DOM
et les fonctions pour accéder aux éléments de la page sont des méthodes de l'objet document.
https://www.w3schools.com/jsref/dom_obj_document.asp

Salut bg ;-))

bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388
4 avril 2015 à 20:35

lut;)
hé tu es tombé sur le 'maître' du ... JS ....
salut RAD ;)

isold Messages postés 57 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016 5
5 avril 2015 à 01:28

Et bien en tout cas, un grand merci...
Pb résolu.

Discussions similaires

Connexion Smart TV Edenwood

Wireless display

Connecter iphone sur tv sans fil

Caster tv edenwood

Qu'est ce que Nvidia Display Container LS ?