Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML5, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance
https://forum.phpfrance.com/

ajouter des champs suivant les options choisis

https://forum.phpfrance.com/viewtopic.php?f=7&t=240730

Page 1 sur 1

ajouter des champs suivant les options choisis

Posté : 31 mai 2008, 14:57
par chris51200
Bonjour a tous,
je voudrais savoir comment je peux ajouter des champs de formulaire suivant l'option choisie
par exemple j'ai un formulaire avec un option a choisir: homme ou femme par bouton radio
"homme" etant choisi par defaut, je voudrais que lorsque je clique "femme" d'autre formulaire apparaissent sur ma page en concervant les données deja renseignées dans les choix precedent
merci de votre aide

Re: ajouter des champs suivant les options choisis

Posté : 31 mai 2008, 15:03
par Calimero
Hello,

Pourquoi faudrait-il toujours en faire plus pour les femmes ? :lol:

Sans code il est bien difficile de t'orienter, selon ton goût et tes connaissances il te faudra pencher du côté d'ajax ou un usage astucieux de javascript avec des styles css pour afficher/cacher des éléments de formulaire (display:none est ton ami).

Dans les deux cas, l'évènement onclick (ou onchange) du bouton radio te permet de détecter l'activation de l'option "femme" du champ de formulaire.

Posté : 01 juin 2008, 11:21
par chris51200
bon alors j'y suis presque mais la je seche...
voici mon code: 
<html>
<head>
<title>essai</title>

<script type="text/javascript">
function ShowElem(idelem)
{
document.getElementById(idelem).style.display='block';
}
function HideElem(idelem)
{
document.getElementById(idelem).style.display='none';
}

</script>

<script type="text/javascript" language="Javascript" >
<!--
function verification(
if(document.formulaire.nom.value == "") {
  alert("Veuillez entrer vos noms et prénoms svp");
  document.formulaire.nom.focus();
  return false;
 }
  else
return true;

if(document.formulaire.email.value == "") {
  alert("Veuillez entrer votre email svp");
  document.formulaire.nom.focus();
  return false;
 }
  else
return true;
if(document.formulaire.address.value == "") {
  alert("Veuillez entrer votre adresse svp");
  document.formulaire.nom.focus();
  return false;
 }
  else
return true;
if(document.formulaire.phone.value == "") {
  alert("Veuillez entrer votre numéro de téléphone svp");
  document.formulaire.nom.focus();
  return false;
 }
  else
return true;
if(document.formulaire.texte.value == "") {
  alert("Veuillez entrer le texte de votre message svp");
  document.formulaire.texte.focus();
  return false;
 }
 else
return true;)
{
}
//-->
</script>

<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
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_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
</head>







<body>





<form name='formulaire' action='traitement.php' method='post'onSubmit="return verification()">
          <table align="center">
            <th width="152" nowrap><div align="left"><font size="2" face="arial">Formulaire 
                de contact</font></div></th>
            <tr> 
              <td><font size="2" face="Arial">Vos noms et pr&eacute;noms :</font> 
              </td>
              <td width="408"><font size="2"> 
                <input name='nom' type='text' size='50'>
                </font></td>
            </tr>
            <tr> 
              <td><font size="2" face="arial">Votre email</font></td>
              <td><font size="2"> 
                <input name='email' type='text' size='50'>
                </font></td>
            </tr>
            <tr> 
              <td><font size="2" face="arial">Votre adresse</font></td>
              <td><font size="2"> 
                <input name='address' type='text' size='50'>
                </font></td>
            </tr>
            <tr> 
              <td><font size="2" face="arial">Votre téléphone</font></td>
              <td><font size="2"> 
                <input name='phone' type='text' size='50'>
                </font></td>
            </tr>
            <tr> 
              <td nowrap><font size="2" face="arial">Le motif de votre message</font></td>
              <td><font size="2"> 
                <input name='sujet' type='radio' value='information' onclick="ShowElem('texte1');HideElem('texte2')"/>
                <font face="arial">Information</font><br>
                <input name='sujet' type='radio' value='reservation' onclick="ShowElem('texte2');HideElem('texte1')"/>
                <font face="arial">R&eacute;servation</font></font></td>
           </tr>
		   
		   <div id="texte1" style="display:none">
             <tr> 
              <td><font size="2" face="Arial">Date d'arrivée:</font> 
              </td>
              <td width="408"><font size="2"> 
                <input name='nom' type='text' size='20'>
                </font></td>
            </tr></div>
			
			<div id="texte2" style="display:none">
            <tr> 
              <td><font size="2" face="Arial">Date depart :</font> 
              </td>
              <td width="408"><font size="2"> 
                <input name='nom' type='text' size='20'>
                </font></td>
            </tr></div>
		   



			
			
			
			
            <tr> 
              <td><font size="2" face="arial">Votre message</font></td>
              <td><font size="2"> 
                <textarea name='texte' cols='40' rows='10'></textarea>
                </font></td>
            </tr>
            <tr> 
              <td><font size="2">&nbsp; </font></td>
              <td> <font size="2"> 
                <input name='soumettre' type='submit' value='Envoyer'>
                <input name='annuler' type='reset' value='Annuler'>
                </font></td>
            </tr>
			
          </table>
		</form>
		
		
      <td width="60" height="409" background="images page/fond-mid-2.jpg"> <div align="center"> 
        </div></td>
    </tr>
  </table>
  
</body>

</html>
donc je voudrais que lorsque le bouton "motif de votre message" soit "informations" les champs "date d'arrivée" et "date de depart" disparaissent et n'apparaissent que lorsque le bouton est sur "reservation"
QUelqu'un peu t il maider??

Posté : 01 juin 2008, 18:20
par Calimero
Effectivement tu y es presque. Ce qu'il te reste à faire est déjà de comprendre ce que ton code fait actuellement dans cette page, et de bien le lire (c'est écrit en toutes lettres dedans, il n'y a rien de difficile).

Sinon, vu que tu n'es plus exactement un nouveau venu sur ce forum, il faudrait peut être arrêter d'utiliser dreamweaver qui te retarde dans ton apprentissage et surcharge tes pages de beaucoup de code inutile (à peu près la moitié des lignes de ce que tu as collé dans ton post), en plus de te donner de mauvaises habitudes, comme la mise en page à l'aide de tableaux qui est de nos jours déconseillée.

Posté : 02 juin 2008, 06:35
par chris51200
toujours rien...
je peux avoir un indice?
merci

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

Posté : 02 juin 2008, 06:55
par Cyrano
À défaut de la réponse adaptée exactement à ton code, regarde ce sujet, tu devrais y trouver un principe général de base.
Heures au format UTC+02:00
Page 1 sur 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/