Affiché valeur checkbox/radio si cochéRésolu

Question

Bonjour ! voilà j'ai un petit travail à faire et je ne parviens pas à résoudre mon problème : Je souhaite affiché la valeur des radios et checkbox cochés et ceci grâce à document.write dans une fonction javascript ! j'arrive bien à afficher le champ texte, textarea et la boite à sélection mais j'ai vraiment du mal avec les autres. Voici le formulaire que j'utilise : voilà ce que j'ai pu faire mais cela ne marche toujours pas ! je ne comprends pas dutout pourquoi ! :

PetoleTeam · Accepted Answer

plusieurs choses en vrac
perso j'aurais choisi le sortie avec alert, remplace document.write par alert, that's all!

une bonne méthode pour récupérer l'objet FORM
//-- Get l'element formulaire
var oForm =  document.forms["mon_formulaire"];
dans le reste du code tu fais référence à oForm. quelqueChose 
pour la TEXTAREA par exemple
//-- Get value de la TEXTAREA
szTmp + = oForm["area"].value +"
";
pour les autres je te donnes un indice
document.getElementsByName("nom_cherche")

un peu de lecture instructive document.getElementsByName
;O)

PetoleTeam · Answer

Bonjour, Je souhaite affiché la valeur des radios et checkbox cochés et ceci grâce à document.write c'est une aberration, document.write, lorsque le fichier est terminé EFFACE le contenu et le remplace par la valeur passée en paramètre il est préférable d'utiliser le innerHTML d'une DIV exemple : innerHTML Case à cocher Autre case à cocher ;O)

amine38 · Answer

Justement dans le cadre de notre TP il nous oblige à utiliser document.write ! j'ai trouvé beaucoup de solution sur internet tel que vous me l'avez donné mais aucune avec document.write

PetoleTeam · Answer

le cadre de notre TP il nous oblige à utiliser document.write
je pense qu'ils veulent tester mais QUOI????

Dans ce cas il est donc au pire préférable de n'écrire qu'une fois, pour ne pas détruire la structure du document en cours et laisser la fonction ce terminer.
var szTmp = "";
szTmp += mon_formulaire.ch1.value  +"
";
szTmp += mon_formulaire.area.value +"
";
// dans la boucle
szTmp += mon_formulaire.rad[i].value +"
";
// ...etc...
// et en final
document.write( szTmp);


;O)

PetoleTeam · Answer

dans le cadre de notre TP
j'ai donc oublié qu'il est donc intéressant de lire document.write et tous ce qui s'y raccroche

;O)

amine38 · Answer

me revoila ! tout d'abord merci de ton aide et de ta patience ! 
j'ai testé avec ceci dans le script mais ça ne fonctionne toujours pas et ça ne m'affiche même plus le champ texte et area :

function sortie()
{
var szTmp = "";
szTmp += mon_formulaire.ch1.value  +"
";
szTmp += mon_formulaire.area.value +"
";
for(i=0;i<2;i++)
{
        szTmp += mon_formulaire.rad[i].value +"
";
        szTmp += mon_formulaire.box[i].value +"
";
}
document.write(szTmp);
return false;
       }

amine38 · Answer

Voici le travail demandé si cela peut aider : But: Transmission de données d'un formulaire à un script JavaScript A) Concevoir un formulaire, appelé formulaire1.html contenant : Un champ texte . Un champ textarea ( multi-lignes et multi-colonnes) Des boites à cocher avec valeurs. Des boutons radio avec valeurs. Une boite à selection de type menu déroulant permettant la sélection de plusieurs valeurs. Ce formulaire possède en plus deux boutons: Envoyer et Effacer associés repectivement aux balises de type submit et reset Le thème et la présentation du formulaire est laissée au libre choix . B) Traitement des informations contenues dans le formulaire: Le traitement de ce formulaire sera fait par une fonction JavaScript dont l' action consistera simplement à lister les valeurs des données du formulaire. Ecriture d' un script en JavaScript: Ecrire cette fonction appelé sortie() activée par l'utilisateur après avoir cliqué sur le bouton de soumission Ces sorties pourront etre mise soit dans une alerte ou dans un document à l'aide de la méthode write appliquée au document: c'est a dire document.write (. . . . . ) Aides: a) Sur le principe du traitement: L'évenement associé au formulaire est déclenché lors du clic sur le bouton submit. Le gestionnaire de cet évenement est onSubmit. La balise form pourra s'écrire: b) On écrira en amont de ce formulaire ( entre les balises head) le script de la fonction sortie() Voici un schema d' écriture du document:

amine38 · Answer

merci beaucoup je vais essayer cela !

amine38 · Answer

j'ai du nouveau ^^ :

	function sortie()
{
var arr = new Array();

 arr=document.getElementsByName("ch1");

for(i=0;i<arr.length;i++)
{
var obj = document.getElementsByName("ch1").item(i);
alert(obj.id+obj.value);
}
 arr=document.getElementsByName("area");

for(i=0;i<arr.length;i++)
{
var obj = document.getElementsByName("area").item(i);
alert(obj.id+obj.value);
}
 arr=document.getElementsByName("rad[]");

for(i=0;i<arr.length;i++)
{

var obj = document.getElementsByName("rad[]").item(i);
alert(obj.value);
}
return false;
}

tout fonctionne bien mais ça m'affiche les deux radios donc je dois tester si la radio est "checkée" mais lorsque je rajoute ceci if(document.mon_formulaire.rad[i].checked) avant var obj = document.getElementsByName("rad[]").item(i); lors du test tout s'efface ! :( je sens que c'est bientôt tout bon ^^

PetoleTeam · Answer

bizarre ton raisonnement
arr=document.getElementsByName("rad[]"); //Recup d'une nodeList
for( i=0; i < arr.length;i++){
  alert( arr.item(i).value); // en direct pourquoi faire complique
  alert( arr[i].value);      // autre ecriture
}


;O)

amine38 · Answer

oui c'est vrai ! j'ai ajouter une ligne pour rien :) c'est plus clair avec votre code ! mais dans les deux cas le test pour savoir si une case est coché afin de ne pas l'afficher pour rien ne fonctionne pas ! et après quelques modifications comme en ajoutant "==true" après "checked" ,dont j'ai trouvé l'astuce sur internet, aucune ne fonctionne donc soit les deux s'affiche soit aucune ...

PetoleTeam · Answer

je reprends ce que tu as écrit au début
if(document.mon_formulaire.rad[i].checked){hormis la syntaxe de la référence à l'élément c'était la bonne démarche


;O)

amine38 · Answer

j'ai essayé "rad[i]" aussi avant "arr[i]" mais cela ne fonctionné pas ...
voici la partie qui ne fonctionne pas (la boucle for avec le test): 

arr=document.getElementsByName("rad[]");
for( i=0; i < arr.length;i++){
 if(document.mon_formulaire.rad[i].checked==true){ 
  alert( arr[i].value);
}
else arr="";
}

PetoleTeam · Answer

non il faut continuer d'utiliser arr[i], qui représente l'élément i de la liste
var arr = document.getElementsByName("rad[]");
for( i=0; i < arr.length; i++){
  if( arr[i].checked ){ 
    alert( arr[i].value); // on affiche
  }
  else{
    ;// on ne fait rien
  }
}

;O)

amine38 · Answer

Je te remercie ÉNORMÉMENT !!! je sais pas quoi dire à part MERCI ! J'ai essayé avec les checkbox ça marche très bien et pour le select je vais pouvoir trouver tout seul je ne te dérange pas plus longtemps tu as déjà fais beaucoup :) encore merci !

amine38 · Answer

voila tout fonctionne à merveille !  merci chef !

PetoleTeam · Answer

l'essentiel à part le fait que tu y arrives et que tu comprennes comment on y arrive.
Bon je pars finir mon bonhomme de neige, pas bien loin de chez toi d'ailleurs si le 38 à une signification.

;O)

amine38 · Answer

crois moi j'en ai plus appris ces 2 heures ci que durant mon option : "initiation à la programmation de site web !" et oui le 38 y est pour quelque chose : Grenoble ! je pense que demain en se levant on sera à 10 15 cm facile :) je te souhaite bonne continuation !

PetoleTeam · Answer

une fois n'est pas coutume, et en guise de conclusion, mais ne le diffuse pas... la fonction finale pourrait ressembler à cela
function sortie() {
  var szTmp = "";
  //-- Get l'element formulaire
  var oForm = document.forms['mon_formulaire'];
  //-- Get les radios bouton
  var tRadio = document.getElementsByName("rad[]");
  //-- Get les checkBox
  var tCheck = document.getElementsByName("box[]");
  //-- on recup les donnees input
  szTmp += oForm["ch1"].value +"
";
  //-- donnee textarea
  szTmp += oForm["area"].value +"
";

  //-- donnee radio bouton
  for (i 0, nb tRadio.length; i < nb; i++) {
    if ( tRadio[i].checked) {
      szTmp += tRadio.item(i)/*[i]*/.value +"
";
    }
  }
  //-- donnee checkBox
  for (i 0, nb tCheck.length; i < nb; i++) {
    if (tCheck[i].checked) {
      szTmp += tCheck[i].value +"
";
    }
  }
  //-- donnee select
  szTmp += oForm["license[]"].value;
  //-- on ecrit d'un block
  document.write( szTmp);
  //-- close le document
  document.close();
  return false; // ne sert à rien mais bon
}

si tu choisis l'option alert, remplace les "
" par des "
".

PS : on a déjà 7cm et pas moyen d'entrevoir Grenoble avec ce qu'il tombe.
;O)

Affiché valeur checkbox/radio si coché

19 réponses

Votre réponse

Discussions similaires