Boutons radio affichés sous condition

Résolu
la chicane Messages postés 156 Date d'inscription   Statut Membre Dernière intervention   -  
la chicane Messages postés 156 Date d'inscription   Statut Membre Dernière intervention   -
Re-Bonjour,

mon formulaire avance, grace à vous...

Je voudrais "améliorer un peu" la présentation en affichant deux boutons radios, à condition que la réponse à la question précédente soit "oui".

Je m'explique :
J'ai une option "participation", avec deux boutons radio : oui/non
Puis, une option "arrivée samedi", avec deux boutons radio : oui/non

Je souhaiterais n'afficher à l'écran la deuxième option "arrivée samedi", si et seulement si le visiteur a répondu "oui" à la première option "participation".

Mon formulaire actuel contient les deux lignes, mais je trouve compliqué pour le visiteur de devoir répondre "non" à la question du samedi, s'il a répondu "non" à la participation...

suis-je bien claire... ? hum... je doute...

mon code html pour le formulaire : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Anniversaire</title>

<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.Style15 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.Style16 {
	font-size: 20px;
	font-weight: bold;
}
.Style23 {color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
.Style25 {
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
}
.Style31 {font-size: x-small}
-->
</style>
</head>

<body style="background-color:#000000;" onload="MM_preloadImages('pictos/bouton_quoi_2.jpg','pictos/bouton_ou_2.jpg','pictos/bouton_quand_2.jpg','pictos/bouton_comment_2.jpg','pictos/bouton_reponse_2.gif','pictos/fleche_gauche2.jpg','pictos/fleche_droite2.jpg')">
<div style="width:800px; height:80px; margin:auto;">
<table width="418" height="80" border="0" align="center" cellspacing="15">
<tr valign="top">
<td width="130"><a href="quoi.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('quoi','','pictos/bouton_quoi_2.jpg',1)"><img src="pictos/bouton_quoi.jpg" name="quoi" width="130" height="40" border="0" id="quoi" /></a></td>
<td width="60"><a href="ou.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ou','','pictos/bouton_ou_2.jpg',1)"><img src="pictos/bouton_ou.jpg" name="ou" width="130" height="40" border="0" id="ou" /></a></td>
<td width="100"><a href="quand.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('quand','','pictos/bouton_quand_2.jpg',1)"><img src="pictos/bouton_quand.jpg" name="quand" width="130" height="40" border="0" id="quand" /></a></td>
<td width="130"><a href="comment.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('comment','','pictos/bouton_comment_2.jpg',1)"><img src="pictos/bouton_comment.jpg" name="comment" width="130" height="40" border="0" id="comment" /></a></td>
</tr>
</table>
</div>

<div style="width:800px; height:500px; background-image:url(pictos/repondre_new_fdp.jpg); background-repeat:no-repeat; margin:auto;">
<form action="traitement_formulaire.php" method="post" name="contact" id="contact">
			<p align="center" class="Style15" style="margin-top:5px;">Merci de 
			  remplir <strong>tous les champs</strong> du formulaire et de le renvoyer
			  pour le <span class="Style16">31
    mai</span></span>.<br />
    <br />
    En fonction du nombre de participants,
    je vous recontacterai par mail courant juin<br />
    pour vous préciser la
      nature de votre participation (entrée
    ou dessert + grillades). </p>
			<table width="85%" align="center" cellpadding="5" cellspacing="2">
		  <tr>
				<td width="289"><span class="Style23">Famille (nom pr&eacute;nom) </span></td>
				<td width="317">				  
			      <div align="left">
			        <input name="nom" type="text" id="nom" style="background-color:#CCCCCC" tabindex="1" size="40" maxlength="40"/>
            </div></td>
			  </tr>
		  <tr>
            <td><span class="Style23">Participera<span class="Style31"></span></span></td>
		    <td><div align="left">
                <table width="200" cellspacing="5">
                  <tr>
                    <td><label>
                      <input name="participation" type="radio" id="participation_0" value="non" />
                      <span class="Style25">Oui</span></label></td>
                    <td><label>
                      <input type="radio" name="participation" value="non" id="participation_1" />
                      <span class="Style25">Non</span></label></td>
                  </tr>
                </table>
		      </div></td>
		    </tr>
				<tr>
				<td><span class="Style23">Nombre de personnes </span></td>
				<td>				  
			      <div align="left">
			        <input name="adultes" type="text" id="adultes" style="background-color:#CCCCCC" tabindex="2" size="40"/>
		          </div></td>
				</tr>
				<tr>
				  <td><span class="Style23">Arrivée le samedi <br />
				      <span class="Style31">Précisez  quand  &ccedil;i-dessous </span></span></td>
				  <td><div align="left">
                      <table width="200" cellspacing="5">
                        <tr>
                          <td><label>
						<input name="samedi" type="radio" id="samedi_0" value="oui" />                            
						  <span class="Style25">Oui</span></label></td>
                   
                          <td><label>
                            <input type="radio" name="samedi" value="non" id="samedi_1" />
                            <span class="Style25">Non</span></label></td>
                        </tr>
                    </table>
				    </div></td>
			  </tr>
				<tr>
				<td><span class="Style23">Adresse mail </span></td>
				<td>				  
			      <div align="left">
			        <input name="email" type="text" id="email" style="background-color:#CCCCCC" tabindex="4" size="40"/>
		          </div></td>
				</tr>
             <!--   <tr>
                  <td><span class="Style23">Recevoir une copie de cet e-mail ?</span></td>
				    <td>				  
			      <div align="left">
			        <table width="200" cellspacing="5">
			          <tr>
			            <td><span class="Style25">
			              <label>
			                <input name="copie" type="radio" id="copie_0" value="oui" checked="checked" />
			                Oui</label>
			              </span></td>
			        
			            <td><span class="Style25">
			              <label>
			                <input type="radio" name="copie" value="non" id="copie_1" />
			                Non</label>
			              </span></td>
			          </tr>
		            </table>
			        </div></td>
				</tr>  -->
			
				<tr>
				<td valign="top"><span class="Style23">Message</span></td>
				<td>
				  <div align="left">
				    <textarea name="message" cols="50" rows="3" id="message" style="background-color:#CCCCCC" tabindex="6"></textarea>
			      </div></td>
				</tr>
				<tr>
				<td>&nbsp;</td>
				<td><input type="submit" name="envoi" value="Envoyer" /></td></tr>
	</table>
            
            <!--ancienne formule pour arrivée le samedi -->
</form>

</div>

</body>
</html>


Le code PHP pour le traitement du formulaire : 

<?php
	
	// destinataire du mail
	$destinataire = 'prenom.nom@operateur.fr';


	// copie à l'émetteur
	$copie = 'oui'; // 'oui' ou 'non'

	// Messages de confirmation du mail
	$message_envoye = 'ar_message.htm';
	$message_non_envoye = 'nok_message.htm';
	$message_erreur_formulaire = "Attention, pour continuer, vous devez <a href=\"contact.html\">envoyer le formulaire</a>.";
	$message_formulaire_invalide = 'nok_champs_form.htm';


	// test d'envoi du formulaire
	if (!isset($_POST['envoi']))
	{
	// si echec
		echo '<p>'.$message_erreur_formulaire.'</p>'."\n";
	}
	else
	{
	/*
	* nettoyer et enregistrer le message
	*/
		function Rec($text)
		{
			$text = trim($text); // supprime les espaces blancs en début et en fin de texte
			if (1 === get_magic_quotes_gpc())
			{
				$stripslashes = create_function('$txt', 'return stripslashes($txt);');
			}
			else
			{
				$stripslashes = create_function('$txt', 'return $txt;');
			}

			// magic quotes ?
			$text = $stripslashes($text);
			$text = htmlspecialchars($text, ENT_QUOTES); // converts to string with " and ' as well
			$text = nl2br($text);
			return $text;
		};

		/*
		 * vérif email
		 */
		function IsEmail($email)
		{
			$pattern = "^([a-z0-9_]|\\-|\\.)+@(([a-z0-9_]|\\-)+\\.)+[a-z]{2,7}$";
			return (eregi($pattern,$email)) ? true : false;
		};

		// formulaire envoyé, on récupère tous les champs.
		$nom		= (isset($_POST['nom']))     ? Rec($_POST['nom'])     : '';
		$participation		= (isset($_POST['participation']))     ? Rec($_POST['participation'])     : '';
		$adultes    = (isset($_POST['adultes']))     ? Rec($_POST['adultes'])     : '';
		$samedi  	= (isset($_POST['samedi']))   ? Rec($_POST['samedi'])   : '';
		$email   	= (isset($_POST['email']))   ? Rec($_POST['email'])   : '';
		$objet   	= (isset($_POST['objet']))   ? Rec($_POST['objet'])   : 'Reponse invitation 50 ans';
		$message 	= (isset($_POST['message'])) ? Rec($_POST['message']) : '';
		//$copie 		= (isset($_POST['copie'])) ? Rec($_POST['copie']) : '';

		// vérification des variables et de l'email ...
		$email = (IsEmail($email)) ? $email : ''; 

		if (($nom != '') && ($participation != '') && ($adultes != '') && ($email != ''))
		{
			
		// envoi du mail après constitution

		//$headers = "Content-Type: text/html; charset=\"iso-8859-1\"\n".'From: '.$nom.' <'.$email.'>';
		$headers = 'Content-Type: text/html; charset="iso-8859-1"'."\n";
		$headers .= 'From: '.$nom.' <'.$email.'>'."\n";
		$headers .= 'Cc: email@expediteur.com'."\n";
		$objet = str_replace("&#039;","'",$objet);
		$message = str_replace('\r\n','<br>',$message);


	// envoyer une copie au visiteur ?
			if ($copie == 'oui')
			{
				$cible = $destinataire.','.$email;
			}
			else
			{
				$cible = $destinataire;
			};

		//constitution du corps du mail

		$message = 'Nom : '.$nom."<br>".'Participation : '.$participation."<br>".'Adultes : '.$adultes."<br>".'Samedi : '.$samedi."<br>".'email : '.$email."<br>".'Message : '.$message;

		// Envoi du mail

		if (mail($cible, $objet, $message, $headers))
			{
		header('Location: ar_message.htm');
			}
		else
			{
			header('Location: nok_message.htm');
			};
		}
		else
		{
		// une des 3 variables (ou plus) est vide ...
			header ('Location: nok_champs_form.htm');
		};
	};
		// fin du if (!isset($_POST['envoi']))

?>

Merci encore à vous.
Je crois que ce sera la dernière question...
A voir également:

6 réponses

Réponse 1 / 6
bloodchecker Messages postés 339 Date d'inscription   Statut Membre Dernière intervention   35
 
j'ai pas repris ton code il est trop long :p Mais l'idée, si j'ai bien compris, est de ne pas afficher tes bouton par défaut (avec un style="display:none").
Et dans le bouton radio "oui" tu ajoute un effet lorsqu'on le selectionne du genre
onclick:document.getElementById("ton bouton radio a afficher").style.display="block"
J'ai pas testé mais l'idée peut être la.
bon courage
0
Réponse 2 / 6
bloodchecker Messages postés 339 Date d'inscription   Statut Membre Dernière intervention   35
 
Aller comme je m'ennuyais je t'ai fait un exemple concret (qui marche \o/) :

<div id=choix1>Non :<input type=radio name=choix1 value=non onclick="document.getElementById('choix2').style.display='none'" /> -- Oui :<input type=radio name=choix1 value=oui onclick="document.getElementById('choix2').style.display='block'" /></div>
<hr />
<div id=choix2 style="display:none">Non :<input type=radio name=choix2 value=non /> -- Oui :<input type=radio name=choix2 value=oui /></div>
0
la chicane Messages postés 156 Date d'inscription   Statut Membre Dernière intervention   37
 
merci d'avance pour le temps que tu me consacres...

bon, j'y connais pas grand chose, mais l'exemple que tu donnes semble correspondre à ce dont j'ai besoin.
Il faut juste que je mette en forme, mais ça je m'en occupe (faut bien que je bosse un peu !!!)

En revanche, si je ne me trompe, ton code utilise le javascript ?
n'y a-t-il pas du <script> à intégrer entre le <head></head> pour que ça fonctionne ??

merci...
0
bloodchecker Messages postés 339 Date d'inscription   Statut Membre Dernière intervention   35 > la chicane Messages postés 156 Date d'inscription   Statut Membre Dernière intervention  
 
non pas besoin de <script> !
0
Réponse 3 / 6
la chicane Messages postés 156 Date d'inscription   Statut Membre Dernière intervention   37
 
je viens d'essayer, je crois que je suis sur la bonne voie, grace à toi...

je vais devoir m'absenter, je te tiens au courant de la suite très vite...

merci encore !!
0
Réponse 4 / 6
la chicane Messages postés 156 Date d'inscription   Statut Membre Dernière intervention   37
 
alors... j'avance, j'avance...

l'action de proposer le champ suivant en fonction de la réponse oui ou non fonctionne bien, selon tes conseils, bloodchecker, et je t'en remercie.

En revanche, je n'arrive pas à une présentation satisfaisante.
Je voudrais que si l'on coche "non" à la question "participera", tout le pavé suivant : nombre de personnes + le champ à remplir, ne s'affiche pas.

Je suppose qu'il faut que je créé un tableau ou un div, et que j'empêche son affiche dans le code du "onclick", mais je n'y arrive pas...

voici le lien vers la page : 
http://www.s295126718.onlinehome.fr/invitation/contact.htm

pour que ce soit plus clair (désolée je n'arrive pas à insérer juste un lien :-( )

et.... serait-ce abuser que te demander comment afficher "deux champs" si le bouton radio "non" est coché.
dans mon code : 

<td><td><label><span class="Style25">Non</span></label>
<input type="radio" name="participation" id="participation_0" value="oui" onclick="document.getElementById('adultes').style.display='block'" /> </td>
 
<td><label><span class="Style25">Non</span></label>
<input type="radio" name="participation" id="participation_1" value="non" onclick="document.getElementById('adultes').style.display='none'" />


là, si on coche non, je n'affiche pas le champs text qui porte l'id "adultes". Mais je souhaiterais aussi ne pas afficher le champ text qui porte l'id "samedi"
J'ai essayé de mettre deux id derrière le onclick, mais je ne connais pas la syntaxe...

et l'idéal bien entendu, étant de n'afficher ni les champs ou bouton radio, ni leur label dans la cellule droite de mon tableau...

pfffff !!!!!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
bloodchecker Messages postés 339 Date d'inscription   Statut Membre Dernière intervention   35
 
Je reprend mon code, en fait, tout ce que tu met dans le div id=div2 ne s'affiche que si oui est coché.

<div id=choix1>Non :<input type=radio name=choix1 value=non onclick="document.getElementById('choix2').style.display='none'" /> -- Oui :<input type=radio name=choix1 value=oui onclick="document.getElementById('choix2').style.display='block'" /></div>
<hr />
<div id=choix2 style="display:none">Non :<input type=radio name=choix2 value=non /> -- Oui :<input type=radio name=choix2 value=oui />

//Ce qui doit etre caché aussi en cas de non

</div>
0
Réponse 6 / 6
la chicane Messages postés 156 Date d'inscription   Statut Membre Dernière intervention   37
 
oui merci, je venais juste de trouver... comme quoi, en se creusant un peu la cervelle...
j'ai mis ce que je veux afficher dans un table, à qui j'ai affecté un "id" (je ne savais pas qu'on pouvait le faire, j'ai essayé...)

voici mon code : 

<td width="305" height="40" valign="top"><p class="Style23"><span class="Style39">Participera</span> <span class="Style36">*</span><br />
            </p>              </td>
		    <td width="353" height="40" colspan="2"><div align="left">
                <table width="200" cellspacing="5">
                  <tr>
                    <td><label><span class="Style25">Oui</span></label>
                    <input type="radio" name="participation" id="participation_0" value="oui" onclick="document.getElementById('participants').style.display='block'" />                      </td>
                    <td><label><span class="Style25">Non</span></label>
                      <input type="radio" name="participation" id="participation_1" value="non" onclick="document.getElementById('participants').style.display='none'" />                      </td>
                  </tr>
                </table>
		      </div></td>
		    </tr>
		    <tr>
              <td height="50" valign="top"></td>
		      <td height="50" colspan="2">
			  
			  <table width="100%" cellpadding="2" cellspacing="2" id="participants">
  				<tr>
    			<td><span class="Style50">Nombre d'enfants</span></td>
    			<td><div align="left">
                  <input name="enfants" type="text" id="enfants" style="background-color:#CCCCCC" tabindex="3" size="10" maxlength="10">
              </div></td>
  </tr>
  				<tr>
  				  <td><span class="Style50">Arriv&eacute;e le samedi</span></td>
  				  <td>      <table width="200" cellspacing="5">
                        <tr>
                          <td><label><span class="Style25">Oui</span></label>
						<input name="samedi" type="radio" id="samedi_0" value="oui" />						  </td>
                   
                          <td><label><span class="Style25">Non</span></label>
                            <input type="radio" name="samedi" value="non" id="samedi_1" />                            </td>
                        </tr>
                    </table></td>
			    </tr>
</table>

			  </td>


et ça marche !!!!

merci tout plein, je progresse... lentement, certes, mais surement !!!

et vive CCM...
0

Discussions similaires

auto radio bloqué
kyhlian -
Xileh -

1 réponse
Comment faire une antenne radio.
LeRoyaliste -
LeRoyaliste -

2 réponses
horloge radiopilotée
papypounet -
Raspou -

13 réponses
comment intégrer une fonction SI dans un champ calculé
vg42 -
vera -

2 réponses