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

Messages postés
12
Date d'inscription
jeudi 7 juin 2007
Dernière intervention
16 décembre 2010
- 16 déc. 2010 à 20:06 - Dernière réponse :
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 16 déc. 2010 à 23:35
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 :
<form name="mon_formulaire" method="POST" onsubmit="return(sortie());">


<textarea name="area" cols="80" rows="10" value="area"></textarea>

radio1

radio2

checkbox1

checkbox2


<select name="license[]" multiple size="2">
<option value="inf">INF</option>
<option value="iag">IAG</option>
</select>



</form>


voilà ce que j'ai pu faire mais cela ne marche toujours pas ! je ne comprends pas dutout pourquoi ! :

<script language="javascript">

    function sortie()
    {

document.write(mon_formulaire.ch1.value,"
",mon_formulaire.area.value,"
");
for (i=0;i<2;i++)
{
    if(document.mon_formulaire.rad[i].checked)
    {        
    document.write(mon_formulaire.rad[i].value,"
");       
    }

if(document.mon_formulaire.box[i].checked) {document.write(mon_formulaire.box[i].value,"
");}
}
document.write(mon_formulaire.license.value);

    return false;
    }
</script>
Afficher la suite 

Votre réponse

19 réponses

Meilleure réponse
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 16 déc. 2010 à 21:27
3
Merci
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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 86 internautes ce mois-ci

Commenter la réponse de PetoleTeam
Meilleure réponse
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 16 déc. 2010 à 22:31
3
Merci
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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 86 internautes ce mois-ci

Commenter la réponse de PetoleTeam
Meilleure réponse
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 16 déc. 2010 à 23:09
3
Merci
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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 86 internautes ce mois-ci

Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 16 déc. 2010 à 20:33
0
Merci
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 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>innerHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//------------------------
function fctWrite( param_){
  var oDest = document.getElementById( 'D_RESULT');
  oDest.innerHTML = param_;
}


</script>
</head>



Case à cocher

Autre case à cocher






</html>


;O)
Commenter la réponse de PetoleTeam
Messages postés
12
Date d'inscription
jeudi 7 juin 2007
Dernière intervention
16 décembre 2010
- 16 déc. 2010 à 20:35
0
Merci
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
Commenter la réponse de amine38
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 16 déc. 2010 à 20:51
0
Merci
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)
Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 16 déc. 2010 à 20:58
0
Merci
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)
Commenter la réponse de PetoleTeam
Messages postés
12
Date d'inscription
jeudi 7 juin 2007
Dernière intervention
16 décembre 2010
- 16 déc. 2010 à 20:59
0
Merci
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;
       }
Commenter la réponse de amine38
Messages postés
12
Date d'inscription
jeudi 7 juin 2007
Dernière intervention
16 décembre 2010
- 16 déc. 2010 à 21:02
0
Merci
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:

<form name="mon_formulaire" method="post" onSubmit="return(sortie(. . . .) )">
Mettre ici les balises des différents champs. N'oubliez pas de donner un nom à chacune des balises des champs
terminez votre formulaire par les balises ci-dessous
< balise submit >

</form>

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:
<html>

<head>
<script language="javascript">
function sortie()
{
ICI les INSTRUCTIONS de SORTIE
. . . ...... . . . . . . .. etc . . . . . . .
return false // A ne pas oublier
}
</script>
</head>

<form . . . . . .
ICI le FORMULAIRE
</form>

</html>
Commenter la réponse de amine38
Messages postés
12
Date d'inscription
jeudi 7 juin 2007
Dernière intervention
16 décembre 2010
- 16 déc. 2010 à 21:32
0
Merci
merci beaucoup je vais essayer cela !
Commenter la réponse de amine38
Messages postés
12
Date d'inscription
jeudi 7 juin 2007
Dernière intervention
16 décembre 2010
- 16 déc. 2010 à 22:20
0
Merci
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 ^^
Commenter la réponse de amine38
Messages postés
12
Date d'inscription
jeudi 7 juin 2007
Dernière intervention
16 décembre 2010
- 16 déc. 2010 à 22:47
0
Merci
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 ...
Commenter la réponse de amine38
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 16 déc. 2010 à 22:54
0
Merci
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)
Commenter la réponse de PetoleTeam
Messages postés
12
Date d'inscription
jeudi 7 juin 2007
Dernière intervention
16 décembre 2010
- 16 déc. 2010 à 23:00
0
Merci
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="";
}
Commenter la réponse de amine38
Messages postés
12
Date d'inscription
jeudi 7 juin 2007
Dernière intervention
16 décembre 2010
- 16 déc. 2010 à 23:15
0
Merci
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 !
Commenter la réponse de amine38
Messages postés
12
Date d'inscription
jeudi 7 juin 2007
Dernière intervention
16 décembre 2010
- 16 déc. 2010 à 23:18
0
Merci
voila tout fonctionne à merveille ! merci chef !
Commenter la réponse de amine38
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 16 déc. 2010 à 23:21
0
Merci
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)
Commenter la réponse de PetoleTeam
Messages postés
12
Date d'inscription
jeudi 7 juin 2007
Dernière intervention
16 décembre 2010
- 16 déc. 2010 à 23:25
0
Merci
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 !
Commenter la réponse de amine38
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 16 déc. 2010 à 23:35
0
Merci
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 "\n".

PS : on a déjà 7cm et pas moyen d'entrevoir Grenoble avec ce qu'il tombe.
;O)
Commenter la réponse de PetoleTeam

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.