Remise à zéro champs cachés d'un formulaire [Résolu]

Signaler
Messages postés
14
Date d'inscription
samedi 18 juin 2005
Statut
Membre
Dernière intervention
15 mars 2007
-
Messages postés
14
Date d'inscription
samedi 18 juin 2005
Statut
Membre
Dernière intervention
15 mars 2007
-
Salut à tous !!

J'avais posté dernièrement mon problème rencontré avec les div display dans un formulaire qui fonctionne maintenant...voilà mon exemple :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="[mailto:nahy7hcfizvgcsn@jetable.net nahy7hcfizvgcsn@jetable.net]">
<meta name="generator" content="AceHTML 5 Freeware">
</head>

<html>

<head>
<script language="javascript">




function afficher(theid)
{
 
  document.getElementById(theid).style.display = 'block';
}


function cacher(theid)
{


document.getElementById(theid).style.display = 'none';


}
</script>
</head>
<form name="maform" >
OUI





  ----

   
choix 1,
choix 2,

    
     Commentaire:
    
   ,
 

 

NON


</form>

</html>



</html>

Maintenant je souhaiterai que ,lorsque je clique sur le "Non" les champs cochés dans le "Oui" soit décochés et que le champ field vidé...idem qd je clique sur le "Oui", tout doit être remis à zéro qd les champs apparaissent.

Je me doute qu'il faille créer une fonction pour ça et la rattacher au "on click" des boutons radio "oui" et "non"...j'ai essayé mais cela ne fonctionne pas...notamment ds mon vrai questionnaire j'ai en plus des séries de boutons radio rattachés au "Oui"....

Est ce que qqn peut me donner une piste sur mon exemple ?? Merci !!

13 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
B
onjour...
Excellent...
la fonction peut toutefois être 'optimisée' comme ceci

function raz( id_){
  var Ref = document.getElementById(id_);
  //-- on cache le DIV
  Ref.style.display ='none';
  //-- Récup de tous les Obj
  var T_Obj = Ref.getElementsByTagName(' * ');// * pour tous les tags
  //-- Parcours le tableau d'Objets
  for( var i =0; i<T_Obj.length; i++){
    //-- On traite suivant le cas
    if( T_Obj[i].checked)
      T_Obj[i].checked = false;
    if( T_Obj[i].type=="text")
      T_Obj[i].value = "";
    if( T_Obj[i].type=="textarea")
      T_Obj[i].value = "";
    //-- On peut en rajouter si d'autres controles
  }
}

l'appel devient
NON

Nota :
  les variables locales peuvent être réutilisée au besoin

;0)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
Bonjour,

>lorsque je clique sur le "Non" les champs cochés soit décochés
    checkbox.checked= false

>que le champ field vidé
    champ .value ="";

>créer une fonction pour ça et la rattacher au "on click" des boutons radio "oui" et "non"
    exact

> mais cela ne fonctionne pas
    on  peut voir ? et qu'est-ce qui ne fonctionne pas ?
    il y a un message d'erreur probablement...

    avec FF : regarder la "console d'erreurs", et mieux télécharger FireBug
    avec IE, activer le debogage, et mieux télécharger le Debogger IE
  


<hr />



Cordialement            Bul         [mon Site]     [M'écrire]     




<hr />
Messages postés
14
Date d'inscription
samedi 18 juin 2005
Statut
Membre
Dernière intervention
15 mars 2007

Bon voilà (c le code pour le questionnaire réel) :

Petites expications suppl. :

-Q07 = > boutons radio "Oui" et "Non"
-Q07a, Q07b, Q07c, Q07d  => c une série de 5 boutons radio chacun avec même entête de colonnes d'appréciation (type très satisfaisant, assez satisfaisant etc...)
                 
                           appréciation 1      appréciation 2    appréciation 3 .....

question Q07a      bouton radio1      bouton radio 2   bouton radio 3....

question Q07b      bouton radio1      bouton radio 2   bouton radio 3...

|
|

- A partir de Q07e => ce sont des checkbox

- Q07lField => un champ text area
<html>
<head><meta http-equiv"content-type" content"text/html; charset= ISO-8859-1"><link type"text/css" rel"stylesheet" href= "styles.css">
<title>Darty.com - Questions de confiance</title><script language"javascript" type"text/javascript">

//ici les mêmes autres fonctions qu'au premier post

functionraz
(){

for(i
= 0
; i
< =n
-1
;i
++){
document
.form1
.Q07a
(i
).checked
= false ;
document
.form1
.Q07b
(i
).checked
=false;
document
.form1
.Q07c
(i
).checked
= false ;
document
.form1
.Q07d
(i
).checked
=false;
}

document
.form1
.Q07e
.checked
= false ;
document
.form1
.Q07f
.checked
=false;
document
.form1
.Q07g
.checked
= false ;
document
.form1
.Q07h
.checked
=false;
document
.form1
.Q07i
.checked
= false ;
document
.form1
.Q07j
.checked
=false;
document
.form1
.Q07k
.checked
= false ;
document
.form1
.Q07l
.checked
=false;
document
.form1
.Q07lField
.value
= ""
;

}

</script>

</head>

<!--tout mon code-->
<!--question 7-->
name "Q07"   type "radio" value= "oui" "
onclick ="afficher( 'divoui7'
);raz
();"
unchecked>Oui id "divoui7" style"
display:none;">

<!--toute série de questions-->
name"Q07" class"formulaire" value= "non" type ="radio"onClick="cacher('divoui7'
);raz
();"
unchecked>Non

</html>

Bon j'espère que c clair !!! Juste je me demande si j'ai utilisé la boucle et si j'ai bien placé la fonction dans le input....je débute en javascript pour info !! :-)

pour exemple, si vous pouviez reprendre mon premier code factice...  Merci !!!
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
si vous pouviez reprendre votre premier code factice

    y ajouter ce que vous y faites ( ou voulez y faire ),
    nous dire ce qui plante, nous montrer...
<hr />


Cordialement            Bul         [mon Site]     [M'écrire]           




<hr />
Messages postés
14
Date d'inscription
samedi 18 juin 2005
Statut
Membre
Dernière intervention
15 mars 2007

Ok ...désolée
Bon on efface tout et on recommence ...Ma problématique de départ c 'est :

 "Est ce que, lorsque je clique sur "Non" après avoir renseigné les sous questions du "Oui" (car j'ai changé d'avis par exemple) , les réponses aux sous questions vont - elles être mémorisés lors de l'envoi du formulaire dans une base de données ? "

Si non, tout va bien

Si oui alors j'ai besoin des les effacer / réinitialiser quand je clique sur "Non"  et donc de créer ma fonction que j'ai nommée raz().

Voilà mon exemple :

<html>

<head>
<meta http-equiv= "Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="nahy7hcfizvgcsn@jetable.net">
<meta name="generator" content="AceHTML 5 Freeware">
</head>

<html>

<head>
<script language="javascript">

function afficher(theid)
{

document.getElementById(theid).style.display = 'block' ;
}

function cacher(theid)
{

document.getElementById(theid).style.display ='none';

}

//RAZ

function raz(){

for(i= 0; i<=n-1;i++){
document.form1.Q01c(i).checked=false;
}

document.form1.Q01a.checked=false;
document.form1.Q01b.checked=false;

document.form1.Q01d.value= "" ;

}
</script>
</head>
<form name ="form1" >
(
'madiv'
);raz();">OUI


display: none">
Sous-question 1?,
choix 1,
choix 2,

----
Sous-question 2?,
choix 1,
choix2,
choix3,

----

Des commentaires ?,

('madiv');raz()">NON

</form>

</html>

</html>

Voilà mais là , quand je fais le test, que je réponds aux sous-questions du "Oui" , que je change d'avis en cliquant sur "Non" et que je rechange d'avis en cliquant sur "Oui" => je vois que mes réponses ont été conservées...hors je veux que tout soit vidé ou décoché....voilà ma seconde problématique ! Qu'est ce qui ne va pas dans mon code ?

Merci !
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
B
onjour à vous tous
une façon d'y arriver peut être celle ci

//-----------------
function Reset( id_){
  //-- Récup l'Objet DIV
  var Ref = document.getElementById(id_);
  //-- Récup les Objets INPUT de l'Objet DIV
  var T_Obj = Ref.getElementsByTagName('input');
  //-- Parcours le tableau d'Objet récupérés
  for( var i=0; i<T_Obj.length; i++){
    //-- Si il est Checked on deChecked
    if( T_Obj[i].checked){
      T_Obj[i].checked = false;
    }
  } 

}

on peut d'ailleurs deChecked sans test

l'appel se fera donc de la façon suivante
'madiv');Reset('madiv')">NON
;0)
Messages postés
14
Date d'inscription
samedi 18 juin 2005
Statut
Membre
Dernière intervention
15 mars 2007

Super !!! Ca fonctionne très bien ...par contre j'ai aussi une textarea dans ma div et en m'inspirant de ce que tu as fait, je n'ai pas réussi à faire effacer le contenu de la textarea...
voilà ce que j'ai essayé :

var
T_Obj2= Ref .getElementsByTagName( 'textarea' );

if
(T_obj2.value <>""){

T_obj2.value ="";
}

Qu'est ce qui ne va pas ?

Merci !
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
    avec FF : regarder la "console d'erreurs", et mieux télécharger FireBug
    avec IE, activer le debogage, et mieux télécharger le Debogger IE
  



if


(


T_obj2

.

value

<>

""

)

{  
    déjà, les navigateurs ne doivent pas trop aimer le truc en rouge







<hr />



Cordialement                Bul             [mon Site]         [M'écrire]     




<hr />
Messages postés
14
Date d'inscription
samedi 18 juin 2005
Statut
Membre
Dernière intervention
15 mars 2007

Merci mais quel est le sigle approprié pour la chaine de caractères...je ne m'en rappelle plus

Désolée mais je ne connais pas encore tout !!
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
                !=

mais il te faut une doc.  j'use de celle de SelfHTML,
en français, téléchargeable. lien vers un .CHM
la version HTML existe aussi, bien entendu.
<hr />


Cordialement            Bul         [mon Site]     [M'écrire]           




<hr />
Messages postés
14
Date d'inscription
samedi 18 juin 2005
Statut
Membre
Dernière intervention
15 mars 2007

Youpi !! j'ai trouvé comment faire !!! Voilà mon code :

//fonction remise à zéro données div

functionraz(id_){
//-- Récup l'Objet DIV
varRef= document .getElementById(id_);
varRef2 =document.getElementById(id_);
//-- Récup les Objets INPUT de l'Objet DIV
varT_Obj= Ref .getElementsByTagName( 'input' );
varT_Obj2 =Ref2.getElementsByTagName('textarea');
//-- Parcours le tableau d'Objet récupérés
for(vari= 0; i <T_Obj.length;i++){
//-- Si il est checked on déchecked
if(T_Obj[i].checked){
T_Obj[i].checked =false;
}
}
for(varj= 0; j <T_Obj2.length;j++){
//
if(T_Obj2[j].value! = "" ){
T_Obj2[j].value ="";
}
}

}

Merci pour votre aide
Messages postés
14
Date d'inscription
samedi 18 juin 2005
Statut
Membre
Dernière intervention
15 mars 2007

Super !! J'ai réussi !! Voilà mon code maintenant :

/fonction remise à zéro données div

function raz( id_){
//-- Récup l'Objet DIV
var Ref = document.getElementById(id_);
var Ref2 = document.getElementById(id_);
//-- Récup les Objets INPUT de l'Objet DIV
var T_Obj = Ref.getElementsByTagName('input');
var T_Obj2 = Ref2.getElementsByTagName('textarea');
//-- Parcours le tableau d'Objet récupérés
for( var i=0; i<T_Obj.length; i++){
//-- Si il est checked on déchecked
if( T_Obj[i].checked){
T_Obj[i].checked = false;
}
}
for( var j=0; j<T_Obj2.length; j++){
//vider le champ textarea
if (T_Obj2[j].value !=""){
T_Obj2[j].value="";
}
}

}

Merci pour votre aide
Messages postés
14
Date d'inscription
samedi 18 juin 2005
Statut
Membre
Dernière intervention
15 mars 2007

Merci pour ce complément qui n'est pas des moindres ;-)