Menu

WEB - formulaire [Résolu]

Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
- - Dernière réponse : juliendu51100
Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
- 3 févr. 2019 à 21:40
Bonjour, je viens vers vous car je suis actuellement en train de réaliser un site intranet d'affichage dynamique. Et je suis un peu ce que l'on appellerais être bloquer.. Je suis actuellement sur la création d'un formulaire qui est composer de : nom de la diapo, date et heure du début de publication, date et heure de fin de publication, le type de diapo (type d'affichage) et juste après c'est la que cela se complique car une fois le type choisis il devrais avoir "choisir un champs" et des bouton nommée "texte", "image", "vidéo" et "pdf" qui doivent apparaitre a chaque fois que l'utilisateur tape sur l'un bouton une balise <input /> devrais être générer suivant la demande mais suivant le type choisis un certain nombre de champs pourrons être choisis au maximum. Je m'explique si le type choisi permet de choisir a "deux points" ont peux choisir deux champ quelque soit lequel même si ce sont les même.
Une fois le bouton du champs est apparue le champs en question doit être créer..
Pourvais vous me guider ? Merci a vous :)
Afficher la suite 

Votre réponse

7 réponses

Meilleure réponse
Messages postés
24593
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 février 2019
1849
2
Merci
Bonjour
Je n'ai pas tout compris... Mais visiblement tu veix creer des champs dynamiquement.
Pour ca tu dois passer par du js.

Dire « Merci » 2

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 57171 internautes nous ont dit merci ce mois-ci

juliendu51100
Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
5 -
merci pour ta réponse je vais me renseigner de suite :)
Commenter la réponse de jordane45
Messages postés
24593
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 février 2019
1849
1
Merci

je recherche un moyen de parcourir les différentes div afin de trouver celle qui est vide

Il te suffit de faire une boucle sur tes div et de vérifier si elles contiennent quelquechose ou non via le
var children = document.getElementById("cible0");
for( var i = 0; i<children.lengtth; i++){
    if( children[i].innerHTML === ""){
      alert("la div " + children[i].id + " est vide !");
     }
}


Cordialement, 
Jordane                                                                 
juliendu51100
Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
5 -
Merci ! beaucoup je vais l'ajouter au code tout de suite :)
Commenter la réponse de jordane45
Messages postés
24593
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 février 2019
1849
1
Merci
Bon....
Voila ton code fonctionnel.
ce n'est pas très propre mais j'ai gardé ta façon de faire :
<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset="utf-8">
  <style>
    .newdiv{
      min-height:80px;
      min-width:80px;
      background-color:#136497;
      border :1px solid black;
    }
  </style>
</head>
<body>
	<h1>test de création d'une div</h1>
	<label class="bmd-label-floating">type de diapo : </label>
	<input type="radio" name="type" value="1" id="1" onclick="fabrique_une_div(this.value)" required /> <label for="1">1</label>
	<input type="radio" name="type" value="2" id="1" onclick="fabrique_une_div(this.value)" required /> <label for="2">2</label>
  <input type="radio" name="type" value="3" id="1" onclick="fabrique_une_div(this.value)" required /> <label for="3">3</label>
	<br /><br />
	<input type="button" name="texte" value="texte" onclick="fabriquer_un_input('text')">
	<input type="button" name="image" value="image" onclick="fabriquer_un_input('file')">
	<input type="button" name="video" value="vidéo" onclick="fabriquer_un_input('file')">
	<div id="cible0"></div>
  
	<script type="text/javascript">  

var cible0 = document.getElementById("cible0");
var deja_passer = null;
var id = '00';
var id_bis = '0';		



function get_div_id(){
  var childrens = cible0.children;
  var nbEnfants = childrens.length;
  console.log("nbEnfants",nbEnfants);
  if (nbEnfants > 0) {
    for( var i = 0; i < nbEnfants ; i++)
    {
        alert("Voici un tour de la boucle !");
        if( childrens[i].innerHTML == "")
        {
          alert("la div " + childrens[i].id + " est vide !");
          return childrens[i].id;
        }
      }
  }else{
    console.log("Aucun enfant dans la div cible0");  
  }
  return false;
}


function fabriquer_un_input(choix)
{
  console.log('fabriquer_un_input('+ choix +')');
  
  var childrens = document.getElementById("cible0");
	var newInp = document.createElement('input');
	if (deja_passer != true) 	{
		window.alert("Merci de choisir un type de diapo.");
	} else {
		var id = get_div_id(); 
    if(typeof(id)!='undefined' && id!=null){
   
     newInp = document.createElement('input');
     newInp.classList.add("mystyle");
     newInp.id = id;
     newInp.name = 'inp_11';
     newInp.type = choix;
     console.log('cible : ',id);
     var el = document.getElementById(id);
     el.appendChild(newInp);
   }
  }
}

		function fabrique_une_div(nombre_de_champs) 
		{
      console.log('fabrique_une_div');
			if (deja_passer == true){
				cible0.innerHTML = ""; // on vide la div
				deja_passer = false;
			}
			
			for (var i = 0; i < nombre_de_champs; i++) 
			{
        // fabrique une div 
        var div = document.createElement("div");
        // Ajoute une classe ࡣette brique pour lui donner un style via CSS
        div.setAttribute('id','div_'+i);
        div.setAttribute('class','newdiv');
        // Ajoute un contenu ࡣette brique...
        // uneBrique.innerHTML = i+1;

        // Ins곥 cette div dans la div cible0 
        cible0.appendChild(div);
    }
  deja_passer = true;
}	

</script>
</body>
</html>



juliendu51100
Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
5 -
merci ! je vais regarder de suite !

Edit : tous est bon merci beaucoup pour ton aide :)
juliendu51100
Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
5 -
je me permet de joindre ce code qui permet de supprimer les inputs. :)
<!DOCTYPE html>
<html>
<head>
 <title>test</title>
 <meta charset="utf-8">
 <style>
 .newdiv{
  min-height:80px;
  min-width:80px;
  background-color:#136497;
  border :1px solid black;
 }
</style>
</head>
<body>
 <h1>test de création d'une div</h1>
 <label class="bmd-label-floating">type de diapo : </label>
 <input type="radio" name="type" value="1" onclick="fabrique_une_div(this.value)" required /> <label for="1">1</label>
 <input type="radio" name="type" value="2" onclick="fabrique_une_div(this.value)" required /> <label for="2">2</label>
 <input type="radio" name="type" value="3" onclick="fabrique_une_div(this.value)" required /> <label for="3">3</label>
 <input type="radio" name="type" value="4" onclick="fabrique_une_div(this.value)" required /> <label for="4">4</label>
 <br /><br />
 <input type="button" name="texte" value="texte" onclick="fabriquer_un_input('text')">
 <input type="button" name="image" value="image" onclick="fabriquer_un_input('file')">
 <input type="button" name="video" value="vidéo" onclick="fabriquer_un_input('file')">
 <input type="button" name="vide" value="vide" onclick="fabriquer_un_input('hidden')">
 <div id="cible0"></div>

 <script type="text/javascript">  

  var cible0 = document.getElementById("cible0");
  var deja_passer = null;
  var id = '00';
  var id_bis = '0';  



  function get_div_id()
  {
   var childrens = cible0.children;
   var nbEnfants = childrens.length;
   console.log("nbEnfants",nbEnfants);
   if (nbEnfants > 0) 
   {
    for( var i = 0; i < nbEnfants ; i++)
    {
     // alert("Voici un tour de la boucle !");
     if( childrens[i].innerHTML == "")
     {
      // alert("la div " + childrens[i].id + " est vide !");
      return childrens[i].id;
      var input=true;
     }
    }
    if (input !== true)
    {
     alert("Tous les champs sont remlis !");
    }
   }
   else
   {
    alert("Tous les champs sont remplis !");
    //console.log("Aucun enfant dans la div cible0");  
   }
   return false;
  }


  function fabriquer_un_input(choix)
  {
   console.log('fabriquer_un_input('+ choix +')');

   var childrens = document.getElementById("cible0");
   var newInp = document.createElement('input');
   if (deja_passer != true)  
   {
    window.alert("Merci de choisir un type de diapo.");
   } 
   else 
   {
    var id = get_div_id(); 
    if(typeof(id)!='undefined' && id!=null)
    {
     newInp = document.createElement('input');
     newInp.classList.add("mystyle");
     newInp.id = id;
     newInp.name = 'inp_11';
     newInp.type = choix;
     console.log('cible : ',id);
     var el = document.getElementById(id);
     el.appendChild(newInp);

     newbutton = document.createElement('input');
     newbutton.classList.add("mystyle");
     newbutton.id = id;
     newbutton.type = 'button';
     newbutton.value = 'supprimer';
     // newbutton.textContent="supprimer";
     newbutton.setAttribute("onClick","supprimer_mon_input('"+id+"')") ;
     console.log('cible : ',id);
     var el2 = document.getElementById(id);
     el2.appendChild(newbutton);
    }
   }
  }

  function fabrique_une_div(nombre_de_champs) 
  {
   console.log('fabrique_une_div');
   if (deja_passer == true){
    cible0.innerHTML = ""; // on vide la div
    deja_passer = false;
   }
   
   for (var i = 0; i < nombre_de_champs; i++) 
   {
        // fabrique une div 
        var div = document.createElement("div");
        // Ajoute une classe ࡣette brique pour lui donner un style via CSS
        div.setAttribute('id','div_'+i);
        div.setAttribute('class','newdiv');
        // Ajoute un contenu ࡣette brique...
        // uneBrique.innerHTML = i+1;

        // Ins곥 cette div dans la div cible0 
        cible0.appendChild(div);
    }
    deja_passer = true;
} 
function supprimer_mon_input(id)
{
 console.log("suppression ");

var element = document.getElementById(id); 

while (element.firstChild) 
 { 
  element.removeChild(element.firstChild);
 }
}

</script>
</body>
</html>


EDIT : Correction des balises de code .... encore ....

a voir ici pour le tester : https://codepen.io/JulienOo/pen/KJmyaj
Commenter la réponse de jordane45
Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
5
0
Merci
Re-bonjour a toutes et a tous j'ai pas mal travailler a sur ce fameux formulaire cette semaine.
Voici ce que je veux faire ce formulaire vas me permettre d'afficher différents affichage sur des écrans distants suivant ce que l'utilisateur aura choisi. dans un premier temps des bouton radio sont a remplir afin de déterminer le nombre de champs. si l'utilisateur choisis le bouton "2" dans ce cas deux div vont être créer. Et c'est a partir de maintenant que je commence a bloquer.. Une fois le nombre de champs choisis je voudrais que lorsque l'utilisateur clique sur texte la première div est remplis par un input text puis il reclique sur image et un autre se créer dans le div suivant. Je tiens aussi a dire que l'utilisateur aura un bouton qui permettra de supprimer une div du coup je recherche un moyen de parcourir les différentes div afin de trouver celle qui est vide afin de lui redonner une autre div Voici sur ce que je suis arriver jusque là :
<!DOCTYPE html>
<html>
<head>
 <title>test</title>
 <meta charset="utf-8">
</head>
<body>
 <h1>test de création d'une div</h1>
 <label class="bmd-label-floating">type de diapo : </label>
 <input type="radio" name="type" value="1" id="1" onclick="fabrique_une_div()" required /> <label for="1">1</label>
 <input type="radio" name="type" value="2" id="1" onclick="fabrique_une_div()" required /> <label for="2">2</label><input type="radio" name="type" value="3" id="1" onclick="fabrique_une_div()" required /> <label for="3">3</label>
 <br /><br />
 <input type="button" name="texte" value="texte" onclick="fabriquer_un_input('text')">
 <input type="button" name="image" value="image" onclick="fabriquer_un_input('file')">
 <input type="button" name="video" value="vidéo" onclick="fabriquer_un_input('file')">
 <div id="cible0"></div>
 <script type="text/javascript">

  let deja_passer = "undefined";
  var id = '00';
  var id_bis = '0';

  function fabrique_une_div() 
  {
   var cible0 = document.getElementById("cible0");

   if (deja_passer == true)
   {
    while (cible0.hasChildNodes()) 
    {
     cible0.removeChild(cible0.firstChild);
    }
    deja_passer = false;
   }
   //recupere l'attribut value de la div qui est cocher 
   var nombre_de_champs = document.querySelector('input[name="type"]:checked').value;
   
   var div;

   for (var i = 0; i < nombre_de_champs; i++) 
   {
    // fabrique une div 
    div = document.createElement("div");
    // Ajoute une classe à cette brique pour lui donner un style via CSS
    div.id = i;
    // Ajoute un contenu à cette brique...
    // uneBrique.innerHTML = i+1;

    // Insére cette div dans la div cible0 
    cible0.appendChild(div);

}
deja_passer = true;
}
function fabriquer_un_input(choix)
{
 if (deja_passer == true)
 {
  let compteur = '00';
  // compteur = compteur + 1 ;

  var el = document.getElementById('0'), elChild = document.createElement('input');

 //elChild.innerHTML = 'Content';
 elChild.classList.add("mystyle");
 elChild.id = id;
 elChild.name = '11';
 elChild.type = choix;
 
 id_bis = id.charAt(1);

el = document.getElementById(id_bis);
el.appendChild(elChild);
 // Prepend it

 // input.insertBefore(inputChild, input.firstChild);

// compteur = compteur + 1;

id = parseInt(id) + 11;
}
else
{
 window.alert("Merci de choisir un type de diapo.");
}
}
//  Lance la fonction de création de div
fabrique_une_div();

//lance la fonction de création de input
fabriquer_un_input();

</script>
</body>
</html>

Je vous invite a regarder ce que sa donne sur se lien ;) https://codepen.io/JulienOo/pen/KJmyaj


Merci a tous pour votre aide. :)
Commenter la réponse de juliendu51100
Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
5
0
Merci
je reviens vers toi car j'ai un petit souci.. Après de nombreux essaie je ne parviens pas a entrer dans la boucle.. Voici comment j'ai "adapter" le code. Merci encore pour ton aide. :)

function fabriquer_un_input(choix)
{
 var children = document.getElementById("cible0");


 for( var i = 0; i < children.length; i++)
 {
  if( children[i].innerHTML === "")
  {
   alert("la div " + children[i].id + " est vide !");

let children = children[i];


   var el = document.getElementById('0'), children = document.createElement('input');

   //children.innerHTML = 'Content';
   children.classList.add("mystyle");
   children.id = id;
   children.name = '11';
   children.type = choix;
   
   // id_bis = id.charAt(1);

   el = document.getElementById(id_bis);
   el.appendChild(children);
  }
 }
jordane45
Messages postés
24593
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 février 2019
1849 -
Tu réinitialises la variable children au premier tour de boucle... donc normal que ça ne marche pas.
juliendu51100
Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
5 -
en mettant ce code la première alerte ce lance mais pas la seconde.. Pourrais tu m’aiguiller ?
 var children = document.getElementById("cible0");
alert("bonjour");
for( var i = 0; i < children.length; i++)
{
alert("Voici un tour de la boucle !");
if( children[i].innerHTML === "")
{
alert("la div " + children[i].id + " est vide !");
}
}
jordane45
Messages postés
24593
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 février 2019
1849 > juliendu51100
Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
-
Ben oui
juliendu51100
Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
5 -
honte a moi ! c'etais la la condition "<" qui fallait remplacer par "!==" merci pour ton aide :)
Commenter la réponse de juliendu51100
Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
5
0
Merci
Bonjour je reviens vers vous car je n'y arrive pas du tous.. quand je lance le code
	for( var i = 0; i !== children.length; i++)
{
alert("Voici un tour de la boucle !");
if( children[i].innerHTML == "")
{
alert("la div " + children[i].id + " est vide !");
}
}

le message "voici un tour de boucle" ce lance qu'une fois (une seul boucle) même si j'ai trois div vide.. de plus je n'arrive pas a entrer dans la boucle if.. :/ des idée ?
jordane45
Messages postés
24593
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 février 2019
1849 -
for( var i = 0; i !== children.length; i++)

cela signifie :
Boucle de 1 = 0 ... tant que i est différent de la taille de children....

la bonne syntaxe serait éventuellement
for( var i = 0; i <= children.length; i++)


mais en fait... la bonne réponse c'est :
for( var i = 0; i < children.length; i++)


Prenons un exemple : children.length = 10
donc :
for( var i = 0; i <= children.length; i++)

fera une boucle de 0 à 10 (soit 11 tours )

for( var i = 0; i < children.length; i++)

fera une boucle de 0 à 9 (soit.. 10 tours)
Commenter la réponse de juliendu51100
Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
5
0
Merci
merci pour ta réponse mais en changeant la condition je ne rentre plus du tout dans la boucle for.. Je te joint e lien mis a jour pour que tu puisse tester : https://codepen.io/JulienOo/pen/KJmyaj
je me demande si le problème ne viens pas de children.lenght
jordane45
Messages postés
24593
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 février 2019
1849 -
Tu relis ton code pour essayer de le comprendre ???
Ne vois tu pas d'erreur ?

Rien qu'à ces deux lignes :
var el = document.getElementById('0'), children = document.createElement('input');
var children = document.getElementById("cible0");

Ne penses tu pas qu'il y a un souci ??

Une variable ne peut pas être utilisée pour deux choses différentes en même temps....
juliendu51100
Messages postés
381
Date d'inscription
samedi 14 mars 2015
Dernière intervention
16 février 2019
5 -
je garde la variable el qui sert de parent et je garde le second children qui me permet de cibler la création ?
Commenter la réponse de juliendu51100